User Interface DesignUser Interface Design NotesNotes

p7p7T120B029T120B029

20201212 pavasario sem. pavasario sem.

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

3

User Interface Design(2)

4

Design process

NEEDS

DESIGN

IMPLEMENTEVALUATE

Modified from Preece, Rogers, and Sharp, Interaction Design

5

Needs• “Need-finding”

– Identifying latent needs, not symptoms

• Observing/Understanding the users’ context

• Collecting data NEEDS

DESIGN

IMPLEMENTEVALUATE

6

Capturing the Data

• Observer’s head• Written notes• Sketches and photos of the setting• Recorded audio (or even video)

7

Design• Ideating – expressing ideas• Brainstorming

– More ideas more creative better– Group vs. individual creativity

• Representing– Sketching– Enacting

NEEDS

DESIGN

IMPLEMENTEVALUATE

8

Implement = Prototype• Brings perspectives together

– Designers– Users– Engineering, marketing, planning,…..

• User interaction design• Conceptual model• Coding a working prototype

NEEDS

DESIGN

IMPLEMENTEVALUATE

9

Examples: Low-Fidelity Prototype

10

Evaluate• User study• Quantitative data• Qualitative data

NEEDS

DESIGN

IMPLEMENTEVALUATE

11

Conducting a user study

• This is a collaborative task!• Prototype (computer, low fidelity)• Facilitator• Observer/Note taker• Users!!!!

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

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?

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?

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

16

User Interface Design Principles

• Undestad users• Know the user• Follow tried and true

rules for interface design

17

Undestand Users

18

Know the User

Novice Knowledgeable

FrequentInfrequent

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

20

Strategies for Differing User Levels?

• Rules• Interaction Styles• Menus• Forms• Command Language

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

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

23

Interaction Styles(1)

• Interaction Devices• Menu Selection• Form Fill-in• Command Language• Natural Language• Direct Manipulation

24

Interaction Styles (2)

25

Command Interface

26

GUI and Direct Manipulation

27

Desktop GUIs and web applications

http://www.mikasbinkis.lt/ktu/#

http://patogiau.lt/paslaugos/kaunas.htm

28

Interaction Devices

29

Pen-based Interaction

30

Interactive Workspaces

31

Virtual Reality

http://www.vrealities.com

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

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

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

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)

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

37

Tools to use

?