Conceptual DesignFrom requirements to first design: ConceptualInitial conceptual modelMetaphorsInteraction stylesMenu-Driven interfacesNatural language interfacesQuestion and answerForm-fillsDirect manipulationPoint-and-clickWIMPDifferent visual designsActivity: Evaluate the 3 visual designs on the previous slideConceptual DesignDr. Dania BilalIS588Spring 20082From 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 needed3Initial conceptual model•Identify interface metaphors suitable for users’ needs •Identify interaction types that best support users’ activities•Identify alternative designs and options4Metaphors•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)5Interaction 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)6Menu-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 structure7Natural 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 cycle8Question 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 power9Form-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, complexity10Direct 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, flexibility11Point-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, navigation12WIMP•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 employed13Different visual designs14Activity: 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