design fundamentals · • 500 mhz pc running linux - speech recognition • dual processor 450 mhz...

Copyright (c) 2003 - Poelman & Associates, Inc. unless otherwise copyrighted. All rights reserved. 1

Design Fundamentals

Some tools, some rules and some examples to learn from.


• Kismet http://www.ai.mit.edu/projects/humanoid-robotics-group/kismet/kismet.html

• Interesting paper on HCI and Gestures http://citeseer.nj.nec.com/cache/papers/cs/3678/http:zSzzSzwww.ifp.uiuc.eduzSz~vladimirzSzpaperszSzuiuc-bi-ai-rcv-95-10.pdf/pavlovic97visual.pdf

• Interesting site on color http://members.aol.com/nonverbal3/color.htm

• Non verbal dictionary http://members.aol.com/nonverbal2/diction1.htm#The%20NONVERBAL%20DICTIONARY

• Asian Gestures http://www.csupomona.edu/~tassi/gestures.htm


UI history (generally available technologies)

• 1945 - Vannevar Bush –Hypertext• 1950s - Punched Cards• 1960s - CICS-”Green Screens” • 1960 - J.C.R. Licklider - Computers Globally Networked • 1969 - Internet Born - 4 Universities• 1971 - DARPA $15MM Project - Speech Recognition • 1974 - BBN-telnet • 1976 - PROMIS-1st hypertext system • 1979 - Head Mounted Display -Virtual Reality


The web • 1982 - ”Internet” coined• 1988 - Apple’s hypercard• 1989 - HTTP-HTML-Tim Berners-Lee • 1992 - mosaic Browser released-text graphics –Andress on • 1995 - Internet Explorer, Yahoo! XHTML draft • 1982 - IBM PC Text UIs (text Based Menus)• 1984 - Mac• 1984 - x windows • 1992 - web &mosaic• 1995 - Dragon Speech Recognition Software Released• 1995 - Win 95 • 2000? - Kismet


Kismet


Kismet Hardware• 15 networked computers• 500 MHz PC running Linux - speech recognition• dual processor 450 MHz PC running Windows NT speech synthesis• Nine networked 400 MHz PC's running QNX (Unix like OS) vision

processing and eye/neck control• Four Motorola 68332 CPUs OS L control it's perception, motivation,

behavior and motor skills• "eyes" are four cameras mounted in the eyeball portion of its head• two microphones mounted on its ears


Metaphor• Metaphor

– The transference of the relation between one set of objects to another set for the purpose of brief explanation; a compressed simile; e. g., the ship plows the sea. --Abbott & Seeley. ``All the world's a stage.'' --Shak.

– Note: The statement, ``that man is a fox,'' is a metaphor; but ``that man is like a fox,'' is a simile, similitude, or comparison.

• Source: Webster's Revised Unabridged Dictionary, © 1996, 1998 MICRA, Inc.

– n : a figure of speech in which an expression is used to refer to something that it does not literally denote in order to suggest a similarity

• Source: WordNet ® 1.6, © 1997 Princeton University


Idiom• Idiom

– n 1: a manner of speaking that is natural to native speakers of a language [syn: parlance]

– 2: the usage or vocabulary that is characteristic of a specific group of people; "the immigrants spoke an odd dialect of English"; "he has a strong German accent" [syn: dialect, accent]

– 3: the style of a particular artist or school or movement; "an imaginative orchestral idiom" [syn: artistic style]

– 4: an expression whose meanings cannot be inferred from the meanings of the words that make it up [syn: idiomatic expression, phrasal idiom, set phrase, phrase]

• Source: WordNet ® 1.6, © 1997 Princeton University


Idiom or metaphor?• Metaphors work via analogy.

Example: windows recycle bin Icon implies the files get reused, Mac trashcan things get deleted (except for floppy disks).

• Idiom is a learnable pattern of behavior that is represented by a symbol (auditory, visual, smell) display. Example: drag and drop, Acrobat icon, the “smell” of natural gas, whatever that picture in the corner means?


Idiom or metaphor• Metaphors:

– Phrases –• “Belt & Braces”• “Stupid as a post”• “Clueless”• “A real Betty”• “A real goat rodeo”

– GUI “desktop”– Trashcan– Letter for email– Can be more restrictive to new functionality not analogous to the metaphorical

symbol• Idiom:

– The alphabet and words!– Phrases –

• “Keep tabs on him”• “Bomb Diggity”,

– Using a mouse to move the pointer on screen– Dropdown menus– Very powerful


PARC legacy

• The original GUI concept was a desktop, with folders and windows overlaying each other with menus.

• 3D buttons.• Now we are stuck with the metaphor!• Metaphors are cute but not always better

than introducing a new idiom.


UI

Defining what we mean by User Interfaces


What is a user interface?

• The part of an application (or tool) that is in contact with the user(s)

• The complete experience that is detectable by the user while using the application (or tool)

• The user’s interactions with the application• Any interaction (direct or indirect) that a

user has with the application.


User – UI - Application

Application

User Interface

User


UI is the way we manipulate tools

UI

UI

Application

Application

UserUI


Every UI has basic features

• Input– Device– Language– Conversation from User to UI

• Output– Device– Language– Conversation from UI to User


Application Models• User Mental Model

– How the user “thinks” the application will respond when manipulated through the UI

– Often only a simple subset of the actual functionality that an application possesses.

• Implementation Model– The underlying code and how the application

really works. – May not completely agree with the users

mental model


Every UI has basic features (2)

• User Experience– Information Architecture - Mapping from the UI to the

functionality and information provided by the application logic

– Possibly idioms and/or metaphors– Feedback mechanisms– Navigation structure– Labels– Menus– Content and/or functionality


Mental Model

• Formed from what the UI “tells the user”• Should match the goals of the user NOT

be dictated by the implementation model• Good mental model and bad

implementation model often succeeds.


User - User Dialog

The communication between user and user – H2H


H2H (Human to Human)Communication

• People communicate with each other via “languages”– Non-symbolic

• Sounds – burp, sneeze, hiccup• Smells, Taste & Aromatic Chemicals • Touch & Pressure• Visual – Facial Expressions

– Symbolic• Motion Symbols – Gestures, dance, acting, sign language, …• Auditory (sound) Symbols

– Verbal – Speech using words– Non-verbal – noises: clap, howl, whistle, bark, …

• Visual Symbols– Verbal - Writing using glyphs (alphabets) and Words– Non-verbal - Icons, colors, position, size, motion

Copyright Poelman & Associates, Inc. All Rights Reserved. 22

H2H - Gestures

• Motions of the body– Pointing– Waving– Shaking your head– Certain fingers held up in certain patterns– American Sign Language -

http://commtechlab.msu.edu/sites/aslweb/browser.htm

• Using a mouse on a computer!http://commtechlab.msu.edu/sites/aslweb/SIGNS/SIGNS_0/M0423.MOVhttp://commtechlab.msu.edu/sites/aslweb/SIGNS/SIGNS_2/M1372.MOV


H2H Communication

• People communicate with each other via– Words – requires understanding the same

verbal language and constructs within that language

– Gestures – pointing, waving, certain fingers held up in certain patterns

– Sounds – beating on a table with your shoe


H2H Communication - Speech

• Speech– Requires understanding the same verbal language– Understanding the same constructs within that language

• Ex: Physicists and Botanists may not be able to communicate all things effectively and clearly

• Ex: Parents and Teenagers can’t communicate!• Ex:The US and England share a language but may not be able to

effectively communicate.– Requires hearing ability– Requires vocalization / speaking– Requires a medium to transport the speech (the air, a telephone

+ air, etc.)


H2H - Written Word

• Written word– Requires understanding the same written language– Understanding the same constructs within that language– Understand the same symbols/glyphs i.e. the western

alphabet, Cyrillic, Hebrew, Arabic, Kanji, …– The rules

• Layout – Left → Right, R → L, Top → Bottom• Syntax• Grammar• Contextual Meaning


Cyrillic


Hebrew


Arabic

• http://www.cafe-syria.com/Alphabet.htm


Braille

• http://simplythebest.net/fonts/dingbats.html


Communication Problems

Je ne comprendspas le prospecteur

américain fou. Pourquoi est il

sautant à travers l'ord'or de hurlement!

J'ai frappé l'or!

Gold! Gold! I’ve struck

gold!


User - Application Dialog

The communication between user and system


How?

• How can a user communicate actions she requests that the application do?

• How can the application communicate the results or confirmation of the actions?

• How can the application communicate requests of the user to the user?


• Input sextuple (M,In,S,R,Out,W)– M – manipulation operator– In – input domain– S – current state of the device– R – resolution function mapping in to out

domain– Out – output domain set– W – work - get purpose set of device

properties


What a mouse can “say”• Pointing

– orienting on a object (a noun)– With tooltips, I’d like to know more about that object

• Left Clicking (and releasing)– select the object I have oriented on and do something. If the object is a

button I’d like to invoke that operation (a verb) in the current context.• Right Clicking (and releasing)

– I would like to see and/or alter (action) the properties of this object and see any related operation that I could invoke in the current context .

• Pressing the left button (and holding down) and then moving the pointer– I would like to drag this object (or its proxy) somewhere or define a

rectangular region.• Releasing after pressing and dragging –

– Dropping - I would like the object I dragged to be acted on by the object I dragged it onto or placed where I dragged it to.

– Defining a region - I’d like to signal that I have defined the region, if the current context permits.


Why is pointing good?• It severely restricts the way that we can say

things to a very simple grammar, yet it allows unambiguous definition of what the source, target and action are.

• Statements pointing allows:– “Select <target object>” – left click (LC)– “Execute application <target>” – left double click (LDC)– “Do <target action>” - LC– “Take <source> and do <a context appropriate action> to it based on <target>

(drag and drop)” – LPress-Move-LRelease– “Move <source> to <target location or object>” – LPress-Move-LRelease– “Do <action> here” – LC– “Get menu of context related actions” – Right Click (RC)


Simple grammar• Statement = Subject + Action + Target• Actions

– Create– Get– Update– Delete– Change– Find Matching

• Subject of the action requested– Screen Area, Character, Word, Sentence, Paragraph, Section,

Chapter, Book.


Design Maxims

Guiding principles, research results and rules of thumb


Maxims• Direct manipulation and feedback are good• Symbols are easier to recognize than text• Menus are for learning, buttons and keystrokes

are for experts• Undo takes the risk out of learning – give me an

undo• Remember what I did before and don’t ask me

stupid questions – predict my wishes• Don’t break my flow


Maxims (2)

• Consistency and cues lower the learning (and remembering curves)

• Intuition = predictability & inference = good UI

• Idiomatic Icons can be more universal than any single written language

• Use the correct input mechanism for the type of information to be entered


Maxims (3)• WYSIWYG (What You See Is What You Get) –

is hard to do effectively.• Entering data via a keyboard is faster than

using any other method currently, including mouse, trackball, voice, handwriting or touchscreen.

• Defining a selection region with a keyboard is very difficult if it is a pixel based image or screen.

• Some operations are very difficult to do with certain UI devices - (like drawing with etch a sketch)


Some people can use the Etch-a-Sketch interface very effectively.


Visual Research• The area of visual acuity is only an area

that is 5% your visual field (foveal vision)! That means on an average monitor (19”) the area you can clearly see is only

To see the other parts of the screen requires moving your eyes around.

***AAAAAA

BBBBThisBBBBCCCCircle ofCCC

DDCharsDDEEEEEE

***


Human Beings• G:

– Recognition– Pattern recognition

• Proximity• Shared characteristics

– Abstraction – a doughnut is like a car tire– Contextual thinking– Learning

• B:– Recall– Remembering too many things (4+/-2)– Remembering them too long (10 to 30 seconds)– Switching tasks– Multitasking


Maxims (4)• Know thy user – capabilities, goals,

experience and expectations.• Object orientation enhances inference

and prediction.• Object orientation is Noun:Verb approach.

Function oriented is Verb:Noun.• The clipboard functions as an implied

target or source in the users request many times.


Maxims (5)

• Try the rules first, until you have a great reason for breaking them.

• Test your great idea out on users, beforereleasing the product.

• People like to learn by trial and error vs. reading the manual.


The way we scan the screen

• This is the Headline of the screen• This is the next line or so


Fitt’s Law (1954)• The time to acquire a target is a function of the

distance and the size of the target– Bigger and closer can be found faster– Use the borders of the screen to “pin” the users

actions – the Mac menu bar vs. the windows version.– MT = a + b log2(2A/W)

where • MT = movement time • a,b = regression coefficients • A = distance of movement from start to target center • W = width of the target


General Principles• Aesthetically Pleasing• Clarity• Compatibility• Comprehensibility• Configurability• Consistency• Control• Directness


General Principles (2)• Efficiency• Familiarity• Flexibility• Forgiveness• Predictability• Recovery• Responsiveness• Simplicity• Transparency


UI Design Principles • Aesthetically Pleasing

– Contrast elements– Group Things – Align – 3D “Look and Feel” – “less is more” - no Ransom Note UI’s

• Clarity – Visually – Functions – Metaphors – Words and text


UI Design Principles • Compatibility

– User– Task, Goals, Job – Product

• Comprehensibility – What to look at – What to do – When to do it – Where to do it – Why to do it – How to do it


UI Design Principles • Configurability

– Personalization – Configuration– Reconfiguration

• Consistency – Look – Use – Action –Result – Position


UI Design Principles • Control

– Users should be in control– Quick Response – Actions: Pauseable – Cancelable –Terminatable -

Undoable – Maintain Context – Avoid modes– Allow user to customize and configure – Support users with Different skill levels, goals,

abilities,…


UI Design Principles • Directness

– Direct way to accomplish tasks – Show alternative ways– Show effects visibly

• Efficiency – Minimize movements-eyes, hands, head, – Short Navigation Path – Obvious eye movement and sequential – Anticipate users wants and needs


UI Design Principles • Familiarity

– Use concepts and language familiar to the user– Mimic the users natural behavior patterns in using the

UI– Use real world metaphors*

*Avoid application level metaphors


UI Design Principles • Flexibility

– Be sensitive to differences between users and their differing skill level, needs and goals.

– Knowledge Level– Experience Level– Preferences– Habits– Current Conditions


UI Design Principles • Forgiveness

– Allow undo and prevent errors– Tolerate errors and auto fix them, if possible– Protect from catastrophic errors– Provide useful information about errors

• Predictability– Allow the user to anticipate the outcome of a new

action based on the way other actions work– Provide hints and clues as to impact of actions


UI Design Principles • Recovery

– Support multiple levels of undo and redo– Ensure that users never lose their work even if a user

error, hardware/software/communications failure • Responsiveness

– Very short lag between action and result– Show progress indicators for actions that take longer– Provide immediate acknowledgement of actions by

changing the UI in an appropriate way


UI Design Principles • Simplicity

– Provide the simplest UI possible to support the needs of the users

• Progressive disclosure – hide the hard/complex stuff for later disclosure

• Defaults• Minimize Alignments• Common actions should be simpler than less often

used operations• Uniformity• Consistency


UI Design Principles

• Transparency– Allow user to focus on the job or task not the

software– The user should have to “out smart” the

software to accomplish the task– Avoid “work arounds” – if the user needs a

work around, you have failed in the design of your software


Physical UIs


Can you tell me what this is the UI for?


The UI

In / Out

Control (Button)

Use of color and texture


Intercom

• Good:– Simplicity– Color and Texture– Visual, auditory and tactile aspects– Appearance implies function – you

talk into the black grate not the white button

– Didn’t reinvent the wheel• Bad:

– Aesthetically dull or even ugly– No labels– What if I can’t speak or hear?


Pay phone GUI


Pay phone GUI• G:

– Similar capabilities– Similar forms– Similar location (in a phone booth)– Standard reusable widgets (keypad, handset,

coinslot)– Robust physically– Single use design – not a “swiss army knife design”

• B:– Digit entry ready – alpha entry is hard– What if you have no change?– What about the change return level – which is

better?– Is the top phone for lefties?


Swiss Army Knife• It has 17 functions!

– 2 Knife blades– Scissors– Flat & Cross point

screwdrivers– Can opener– Corkscrew– Digital Altimeter!?

• Does many things but none of them excellently

• http://www.victorinox.com/newsite/en/index.htm


ATM UIs – Text (TUI) & GUI


Hardwired ATM• G:

– Keypad easy to find– Easy to see where the money comes

from– Standard look – easy to learn to use– Lower cost to produce– Easier for visually impaired/blind to

use.– Less easily damaged by abuse

• B:– Could use auditory/speech interface– Hard to read in bright light– Textual vs. iconic may be harder to

use– Harder to enhance functionality


Softwired ATM• G:

– Uses color, icons and text– Direct manipulation – touch– More choices displayed at the

same time – faster access– Looks cooler– Easier to add new features

• B:– Clunky to enter information via

touchscreen– Sometime buttons are not in

registration with the touchscreen – can’t press the button where it appears on the screen.

– No standard look between different ATM displays/banks.

– Cost more to buy and operate


ATM UIs – Text (TUI) & GUI• Hard vs. soft interface widgets• Flexibility vs. usability• Top ATM easier for blind

users• Bottom GUI & Touchscreen

version is more flexible to add features.

• Aesthetically GUI looks cooler.


Door and handles


Doorhandles• G:

– Stylish– Simple– Position

• B:– Bad UI Design – user cannot

predict whether the door opens in or out

– Same control (handle) used for very different operations – pushing versus pulling


Consider …

• With doors that have the same handles inside and out

Hallway


Good UI – pull out / push in• G:

– Implies functions are different

– Vertical is pull– Horizontal is push

• B:– Horizontal

doesn’t indicate which end of the door the hinge is


TUI vs.GUI


TUI vs.GUI• TUI

– G:• No idiom/metaphor• Colors

– B:• Need ability to read

• GUI:– G:

• Colors• No need to read• Simple idiom to learn

– B:• Need to recognize the idiom• Positioned side by side


Better

• Tells you how much time you have until the light changes


What does this mean?

– “Its ok to stand next to your bike?”– “Its ok to NOT wear a helmet and

stand next to your bike?”– “You are walking your unicycle in

a large green tube?”• Introducing a new

idiom/metaphor– Should explain it using words– Then I can ignore the labels later– If it’s a metaphor, I don’t get it


Elevator buttons


• G:– Tactile labels in the elevator– Standard layout– Visual feedback of action– Pliancy – buttons move when

pushed– Standard idioms (up and down

triangles)• B:

– No labels on call buttons – are they needed?


Input device for the USPS• G:

– A well known idiom (in the US) used in software as a metaphor.

– Standard look and feel– Simple interface – stamps, address,

envelope, and handle on the box– Labels

• B:– No support for visually impaired– Limited feedback while its in the mail

• Use a certified delivery receipt


Browser UI for a restaurant• G:

– Simple and easy to read– 2 Typefaces – 3 Fonts– High contrast– Good labels

• Today’s Specials• Price

• B:– Too many ungrouped choices– Requires ability to read english


The Kappabashi Dori has a Japanese solution to ordering …

• Sushi mokei• Plastic models

of differentsushi.

• Point to whatyou want toeat.

• Metaphorical

• http://www.cherryblossomgardens.com/sushi_gifts.asp


Even this has a UI with controls, labels and feedback


NASDAQ GUI in Times Square


Summary of Good Physical UIs• Clear Labels• Consistency• Feedback• Pliancy• Use of idioms and metaphors• Visual differentiation• Foreground and background use• Aesthetics• No reinventing the wheel – a phone looks like a

phone


GUI Widgets In depth


Font Dialog


Flash Editor Application


Save As … Dialog


Label• Use:

– For displaying static text– Hinting at the function of a control– Conveying meaning to a user– A “:” at then end of a label– A noun or noun phrase– Cap on first or Headline capitalization– Use a single Font for all text in that label.– Most labels should be the same font size

• Avoid:– Changing the text dynamically– Using fonts different than system– All lower or all UPPER


Text Box

• Use:– Entering a value via the keyboard– Discrete values– Editing existing value without retyping

full text in• Avoid:

– Non-editable and white background


Command Button• Use:

– Action word – verb (with implied target) or Noun (with implied action)

– Immediate action– Should change visually if pressed – pliant

response– To trigger an action or a change of state– Keyboard Mnemonics– Text, Icon or Both– For dialogs and frequently used operations

(see toolbars)– Include tooltips

• Avoid:– Using to display text and not be pressable– Too small or crammed together– Set/reset a value but not initiate an action

(see checkbox)


Standard Command Labels• “OK” – accept any changes and close the

dialog• “Cancel” – abandon any uncommitted changes

and close the dialog box• “Reset” – restore the defaults in the dialog• “Apply” – commit the changes but don’t close

the dialog• “Close” – Close the window and ABANDON

any uncommitted changes.• “Help” – open the online help dialog


Standard Intent Indicators• “…” – spawns a

window or dialog• “>” - leads to a

menu• “>>” – expands

the dialog and visible controls

• “->” button action relates to the control pointed to

MinimizeRestore / MaximizeCloseHelp

Gray out unavailable options


Command Button Aesthetics• Minimum size 25 pixels high• Consistent size for all related

buttons• Align the buttons vertically or

horizontally• Short labels• Limit of 6 or fewer per dialog• No really long or tall buttons

All of these buttonsare bad!!

AVOID THIS


Dialog Aesthetics

• Group buttons• Same size• Mnemonics• Simple labels• Layout commands on the right edge• Termination buttons on the bottom in a

CONSISTENT PLACE IN ALL YOUR DIALOGS!• Make the dialog large enough to fit the buttons and

controls. Don’t cram everything into the dialog.


Button (And Dialog Box tips)• Group related buttons• Horizontal buttons - place most frequently used left most• Maintain the order and placement of buttons / groups of

buttons that appear on more than on dialog or place in the application

• Affirmative action above or to the left.• Put space between often used buttons and potentially

destructive buttons• Default action should be the most frequently executed

choice e.g. “OK” unless destructive.• Enter key should execute the default action.• In a scrollable window don’t scroll the command buttons.


Toggle Button• Use:

– To show a toggleable state– When the to states are easily

understood• Avoid:

– If the state is hard to represent with an icon

– To trigger an action– The NOT of the icon isn’t easily

understood i.e. NOT portrait mode, NOT red,


Tooltips• Popup short label for

buttons that appear after you hold the pointer over them for a short period (1/2 second approx.)

• A cue to expert users about the function of a button (or widget)


Buttcons – Iconic Buttons and ButtonBars(Toolbars)

• Use:– For related sets of commands– Standard sized icons– Consistent icons where ever that

function occurs in the application– Use distinct symbols– Its ok to create new symbols that

are not metaphors but idioms• Avoid:

– For beginners– Infrequently used commands


Checkbox• Use:

– Set/unsetting a non-mutually exclusive set of states.

– Binary state attributes– Label should be a state– A single word label is best– A Cap first letter and Mixed case is best

for the label– Use in property dialogs

• Avoid:– Multiple discrete values– Continuous values– Using too many


Listbox• Use:

– For short lists of related items that are discrete values

– More effective than dropdowns• Avoid:

– If takes up too much screen area

– Using for continuous values


Dropdown Listbox• Use:

– Saves space– For long lists– Sort or arrange order

• Avoid:– For frequent

operations (use listboxinstead)


Dropdown List Buttcon• Use:

– Fast access to frequently used commands

– For experts• Avoid:

– For infrequently used command (leave on main menus.)


Spin Control

• Use:– For fine adjustments of numerical values via pointing

device– For a list of quick discrete choices– To allow quick typing in of values– To prevent users from entering illegal values

• Avoid:– For entering continuous values– For values that are better adjusted through a visual

feedback (like a slider)


Icons in lists

• Use:– Visually differentiate the types of entries i.e. powerpoint

files have a different icon than word docs.– Match the icons displayed in other places for that doc

type• Avoid:

– Using different icons for the same doc type– If only one doc type supported


(Top level) Application Menu

• Use:– Top categories of an application– Use the standard labels– Accelerators and Mnemonics

• Avoid:– Using non-standard categories or labels– Using phrases – one word is best


Drop down menu from the Main menu

• Use:– Icons, Labels, Accelerators, and Mnemonics– Groups of related items– Use Headline Style– Use the standard terms, accelerators and

mnemonics– Gray out unavailable items– To teach beginners what the application is

capable of doing• Avoid:

– Too many items (8-10 or max 32 with separators)

– Changing order of items– Using for experts – give them buttcons or other

tools.


Standard top level menu Labels• File -• Edit -• View -• Insert -• Format -• Tools -• Window -• Help -


Tool Pallette• Use:

– To change the current global operating mode for an application i.e. brush, pen, spray, eraser,…

– For frequently used tools/functions– Faster than drop down menus– Should duplicate some of the functions

available on the menus– For commands - command buttcons– In main app window or in dialogs

• Avoid:– Spawning dialogs from buttons


Start Button & Cascading Start Menus


Start Button & Cascading Start Menus

Selection

Cascade Indicators


Cascading Menus• Use:

– Hierarchically organized features to avoid making menus too loaded with items

– To avoid complex dialogs poping up• Avoid:

– More than 2 cascades– For users with limited dexterity, hard to navigate

easily.– XP start button has gone a bit crazy with cascading

menus!


Popup menus• Use:

– To provide context specific properties for the currently selected item – very object oriented

– Narrower view of items than from the main menus

– All items should also be on the main menus

– Execute and disappear• Avoid:

– Too many items– Different order than on the main menus


Human Interface Design Principles from Aqua guide

• Metaphors• See-and-Point• Direct Manipulation• User Control• Feedback and

Communication• Consistency• WYSIWYG (What You See

Is What You Get)• Forgiveness• Perceived Stability• Aesthetic Integrity

• Modelessness• Knowledge of Your

Audience• Worldwide

Compatibility• Cultural Values• Language Differences• Text Display and Text

Editing• Default Alignment of

Interface Elements


Design Guidelines

• Cornell University http://ergo.human.cornell.edu/ahtutorials/interface.html

• Mac OS X Aqua guidelines http://developer.apple.com/techpubs/macosx/Essentials/AquaHIGuidelines/index.html


Written Language Resources• http://www.cafe-syria.com/Alphabet.htm - an Arabic pronunciation

applet• http://www.zhongwen.com/ - chinese info• http://welcome.to/egyptionary• http://www.esperanto.net/• http://webnz.co.nz/checkers/grammar2.html good English grammar


Resources

• Tog on design http://www.asktog.com/basics/firstPrinciples.html

• Fitt’s law http://ei.cs.vt.edu/~cs5724/g1/glance.html

• HCI http://ei.cs.vt.edu/~cs5724/

design fundamentals · • 500 mhz pc running linux - speech recognition • dual processor 450 mhz...

Documents