Conceptual Design

Dr. Dania Bilal

IS588

Spring 2008

2

From requirements to first design: Conceptual

• Transform needs and requirements into a conceptual model

• Guidelines– Keep an open mind but never forget users– Discuss ideas with stakeholders– Develop a low-fidelity prototype– Obtain feedback– Iterate design as many times as needed

3

Initial conceptual model

• Identify interface metaphors suitable for users’ needs

• Identify interaction types that best support users’ activities

• Identify alternative designs and options

4

Metaphors

• Evaluate identified metaphors in terms of– Structure (e.g., familiarity)– Relevance to content– Ease of representation (visual, audio, text)– User understanding of meaning

(Text pp.543-544)

5

Interaction styles

• Command line• Menu-driven• Natural language• Question and answer (e.g., Yahoo Answers,

questionnaires)• Form fills (e.g., Google Advanced)• Direct manipulation

– Windows– WIMP (Windows, Icons, Menus, Pointers)

6

Menu-Driven interfaces

• The original infrequent/inexperienced user interface

• Components– Lists of options (text or graphic), selection mechanism,

navigation, information architecture

• Usability affected by– Allows explanation

– Supports recognition more than recall

– Simplicity and structure

7

Natural language interfaces

• Can be multi-modal (visual, auditory, haptic)• Components

– Speech input, typed text, gesture recognition

• Issues – Hard to do

– Usability issues• Success rate which may be dependent on restricted vocabulary

or training

• May require feedback/correction cycle

8

Question and answer

• Structured dialog through specific domain• Examples: questionnaires, wizards, programmed

instruction• Components

– Restricted set of options, limited input/selection tools, intelligent branching

• Usability issues– Easy to use but – Limited functionality and power

9

Form-fills

• Data entry• Form-fill components

– Multiple fields on full-screen display– Multiple data entry types

• Spreadsheets are form-fills– components

• Values, formulas, text

• Usability issues– Grid design, navigation, data types, complexity

10

Direct manipulation

• Components– Point/click sensitive places– Ability to move objects directly– Cursor, touchscreen input– Clipboards, toolboxes, templates, palettes– Icons, graphics

• Usability issues– Speed, icon design, flexibility

11

Point-and-click

• A direct manipulation variant– Sensitive point indicators through highlighting,

shading, hover– Ability to navigate via hyperlinks

• Usability issues– Lack of clear UI definition, navigation

12

WIMP

• The current “default” direct manipulation interface across applications and platforms

• “Windows, Icons, Menus, Pointers”• “Windows, Icons, Mouse, Pull-down

menus”• Each interaction type has advantages and

disadvantages• A combination may be employed

13

Different visual designs

14

Activity: Evaluate the 3 visual designs on the previous slide

• Identify the type of interaction styles in the 3 figures

• Who are the intended users of each of the styles?

• Assess the value of icons, text, and other cues in each design