user interface design notes p7 t120b029 2012 pavasario sem
TRANSCRIPT
![Page 1: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/1.jpg)
User Interface DesignUser Interface Design NotesNotes
p7p7T120B029T120B029
20201212 pavasario sem. pavasario sem.
![Page 2: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/2.jpg)
2
User Interface Design(1)
• What is a user interface?
• Human-computer interaction is a major sub-area of software engineering
• Separation of information content and information form
![Page 3: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/3.jpg)
3
User Interface Design(2)
![Page 4: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/4.jpg)
4
Design process
NEEDS
DESIGN
IMPLEMENTEVALUATE
Modified from Preece, Rogers, and Sharp, Interaction Design
![Page 5: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/5.jpg)
5
Needs• “Need-finding”
– Identifying latent needs, not symptoms
• Observing/Understanding the users’ context
• Collecting data NEEDS
DESIGN
IMPLEMENTEVALUATE
![Page 6: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/6.jpg)
6
Capturing the Data
• Observer’s head• Written notes• Sketches and photos of the setting• Recorded audio (or even video)
![Page 7: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/7.jpg)
7
Design• Ideating – expressing ideas• Brainstorming
– More ideas more creative better– Group vs. individual creativity
• Representing– Sketching– Enacting
NEEDS
DESIGN
IMPLEMENTEVALUATE
![Page 8: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/8.jpg)
8
Implement = Prototype• Brings perspectives together
– Designers– Users– Engineering, marketing, planning,…..
• User interaction design• Conceptual model• Coding a working prototype
NEEDS
DESIGN
IMPLEMENTEVALUATE
![Page 9: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/9.jpg)
9
Examples: Low-Fidelity Prototype
![Page 10: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/10.jpg)
10
Evaluate• User study• Quantitative data• Qualitative data
NEEDS
DESIGN
IMPLEMENTEVALUATE
![Page 11: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/11.jpg)
11
Conducting a user study
• This is a collaborative task!• Prototype (computer, low fidelity)• Facilitator• Observer/Note taker• Users!!!!
![Page 12: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/12.jpg)
12
First-hand observation
• Identifying users and stakeholders• Observe in the interviewee’s context• Focused, short• Eliciting and interpreting user’s needs• Goal is to abstract design implications
![Page 13: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/13.jpg)
13
Measurable Quality Factors
• Ease of learning (time to learn)– How long does it take typical members
of user community to learn how to use the commands relevant to a set of tasks?
• Speed of use– How long does it take to carry out the
benchmark tasks?
![Page 14: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/14.jpg)
14
Measurable Quality Factors
• Frequency of errors– How many and what kinds of errors do users
make in carrying out the benchmark tasks?
• Knowledge retention– How well do users maintain their knowledge
over different periods of time?
• User satisfaction– How measure?
![Page 15: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/15.jpg)
15
Guidelines for “User-Friendliness”
• Use instructions that are easy to learn and remember
• Make help functions context sensitive• Present logically connected functions
together and consistently• Create graphical user interfaces
whenever possible • Allow actions to be activated quickly
![Page 16: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/16.jpg)
16
User Interface Design Principles
• Undestad users• Know the user• Follow tried and true
rules for interface design
![Page 17: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/17.jpg)
17
Undestand Users
![Page 18: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/18.jpg)
18
Know the User
Novice Knowledgeable
FrequentInfrequent
![Page 19: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/19.jpg)
19
Know the User• Novice
– Lots of feedback– Clear, constructive error messages– Minimize chances of making an error
• Knowledgeable but infrequent– Menus, consistent commands– Help screens
• Knowledgeable and frequent– Little feedback– Shortcuts
![Page 20: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/20.jpg)
20
Strategies for Differing User Levels?
• Rules• Interaction Styles• Menus• Forms• Command Language
![Page 21: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/21.jpg)
21
Rules for Interface Design (1)
• Be consistent• Provide shortcuts• Offer useful, meaningful feedback• Design a beginning, middle and end
for each sequence of actions• Prevent catastrophic mistakes
![Page 22: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/22.jpg)
22
Rules for Interface Design (2)
• Verify deletion tasks• Allow easy reversal of most actions• Make user focus on task, not interface• Do not rely on user memory• Display only currently relevant
information
![Page 23: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/23.jpg)
23
Interaction Styles(1)
• Interaction Devices• Menu Selection• Form Fill-in• Command Language• Natural Language• Direct Manipulation
![Page 24: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/24.jpg)
24
Interaction Styles (2)
![Page 25: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/25.jpg)
25
Command Interface
![Page 26: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/26.jpg)
26
GUI and Direct Manipulation
![Page 27: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/27.jpg)
27
Desktop GUIs and web applications
http://www.mikasbinkis.lt/ktu/#
http://patogiau.lt/paslaugos/kaunas.htm
![Page 28: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/28.jpg)
28
Interaction Devices
![Page 29: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/29.jpg)
29
Pen-based Interaction
![Page 30: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/30.jpg)
30
Interactive Workspaces
![Page 31: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/31.jpg)
31
Virtual Reality
http://www.vrealities.com
![Page 32: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/32.jpg)
32
Guidelines for Menus
• Be consistent and use terminology familiar to users
• Use distinctive items• Be concise• Put keywords first in the item name• Create groups of logically similar
items
![Page 33: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/33.jpg)
33
Guidelines for Forms• Use a meaningful title• Give understandable but brief instructions• Use logical sequencing and grouping of fields • Use familiar and consistent field labels• Prevent errors whenever possible• Allow easy error correction• Clearly mark optional fields• Clearly signal the completion of data entry
![Page 34: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/34.jpg)
34
Guidelines for Command Language
• Limit the number of commands• Choose meaningful, distinctive command
names• If abbreviations are used, be consistent• Structure of the command language should be
consistent• Use prompts to help intermittent users• Consider command menus to help
intermittent users
![Page 35: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/35.jpg)
35
Guidelines for Direct Manipulation
• Use easy to understand icons• Avoid misleading analogies• Do not violate population stereotypes• Use icons for appropriate purposes
(consider Calculator)• Carefully design the iconic interaction
(manner in which an icon is used)
![Page 36: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/36.jpg)
36
Summary• User interfaces are ubiquitous• Good user interfaces need to be
designed• Bad user interfaces have
ramifications– Economic, political– Enjoyment– Even life or death
11:30
![Page 37: User Interface Design Notes p7 T120B029 2012 pavasario sem](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649d215503460f949f6ce9/html5/thumbnails/37.jpg)
37
Tools to use
?