Designing User Interfaces - TUTprojekti/2013-14/UI-design-lecture_29102013.pdf · Designing User...

10/29/2013

1

Designing User InterfacesTIE-13100

29.10.2013

Thomas OlssonUnit of Human-Centered Technology

(IHTE)

Contents

• UI design: principles and aspects to consider• Methods for UI design• Standards, styleguides and other tools

29.10.2013TIE-13100 – Thomas Olsson 2

10/29/2013

2

The structure principle• Organize the user interface purposefully, based on clear and consistent

models that are apparent and recognizable to users– put related things together and separate unrelated things,– The structure principle is concerned with overall user interface architecture

• E.g. the Gestalt Principles of Grouping


Visibility

Vs.

29.10.2013 4

http://idyeah.com/blog/2011/03/visibility-principle-in-user-interfaces/

10/29/2013

3

Visibility and feedback

• Make all needed options for a given task visible withoutdistracting the user with too much information– Communicate the affordances and the outcome of using them– Natural links between controls and outcomes– Designed elements should look like how they behave

• Keep users informed of actions, changes of state or condition,and errors or exceptions that are relevant to the user– Clear, concise, and unambiguous language familiar to users– Consider different sensory modalities

10/29/2013TIE-13100 – Thomas Olsson 5

Simplicity• Make simple, common tasks easy

– Design them first, minimize interactions– Make them available from different states

• E.g. good shortcuts that are meaningfullyrelated to longer procedures

• “Does the user really need this?”– the necessary elements are succinct and make

sense– Are you adding things because you like or

want them?– Bad example: http://timesofindia.indiatimes.com/

• Progressive disclosure: first overview, then details• Conserve user attention – avoid information overflow


10/29/2013

4

Consistency & Ease of use

• Language, layout, and visual design are just a few interfaceelements that need consistency– Aim also for consistency in terms of conceptual model, platform

standards, earlier versions of the product (or similar), people’sexpectations…

• Great design is transparent: focus on the action rather thanthe interface

• Recognition rather than recall: learnability and memorizability• Reduce memory load


Reuse• Reuse internal and external components and

behaviors– Reduce the need for users to rethink and remember– UI design patterns – make users feel like at home– Norms in user manuals


10/29/2013

5

Error recovery & user control

• People will make mistakes• Design should be flexible and tolerant, reducing the cost of

mistakes and misuse– Undo/redo actions, be forgiving with varied inputs– Confirmations– Use your error messages as a teaching situation: show what action was

wrong, and ensure that she/he knows how to prevent the error fromoccurring again

• A clearly marked "emergency exit" to leave the unwanted state• Support undo and redo


And most importantly:Know your user and his/her context!

• Any of the previous can be radically affected by– The user’s characteristics, skills and knowledge– Habits, norms and organizational rules– The physical and social environment– Tasks, goals and general needs & values

• Search for specific principles about designing for children,handicapped users, elderly, specific work contexts etc.– Also PC vs. mobile, leisure vs. work etc.


10/29/2013

6

Common Interactive TasksWhat to at least support in your UIs• Overview

– Get an overview of the collection

• Zoom– Zoom in on items of interest

• Filter– Remove uninteresting items

• Details on demand– Select items and get details

• Relate– View relationships between items

• History– Keep a history of actions for undo, replay, re nement

• Extract– Make subcollections

Shneiderman, B., 1996. The eyes have it: Atask by data type taxonomy for informationvisualizations. In: Proceedings of the IEEESymposium on Visual Languages. IEEEComputer Society, pp. 336–343


Jodi Forlizzi:http://goodgestreet.com/theory/exp.html

More about how to design usable andpleasurable UIs

• Nielsen’s 10 usability heuristics:– http://www.nngroup.com/articles/ten-usability-heuristics/

• Norman’s design principles:– Visibility, Feedback, Consistency, Mapping, Affordances…– http://www.csun.edu/science/courses/671/bibliography/preece.html

• Shneiderman’s 8 golden rules– E.g. enable shortcuts, simple error handling, reduce memory-

load• http://faculty.washington.edu/jtenenbg/courses/360/f04/sessions/sc

hneidermanGoldenRules.html

• Use of colors:– Marcus Aaron: Graphic Design for Electronic Documents and User

Interfaces

• ISO standard 9241-10: Ergonomic requirements for office workwith visual display terminals (VDTs) -- Part 10: Dialogue principles

Good Design:• Thinks like I do• Makes me smarter• Is reliable, consistent• Is trustworthy, revealing,

transparent• Shows me, doesn’t tell

me how…• Isn’t hard to understand• Shows me how to

advance: speed, accuracy,productivity

• Tells me what I can’t dobefore I do it

• Allows “mistakes”• Sees from my point of

view• Keeps getting better• Encourages feedback,

complaint• Gets to know me• Makes me feel good,

happy• Is positively memorable

http://uxdesign.com/design/article/good-design/54


10/29/2013

7

About informationvisualization…• Visual representations of abstract data

– Transform data into information Helps humanperform cognitive tasks more effectively(understand, identify, compare, analyze…)

– Can be interactive

• Diagrams, pie charts etc. – frequencies andproportions

• Lines, bar charts – e.g. something over time

• Graphs, trees, networks – interrelations

• Tables and other multi-dimensional –interrelations, sorting and cross tabulation

• Geological maps, heat maps, etc. – spatial, relatedto known information



10/29/2013

8

Visual ways to emphasize things

• Form-related• Surface-related• Spatial• Motion and animationEtc.

10/29/2013 15

Methods for UI-designConceptual model

Before detailed UI-design, investigate:1. What the users know and understand2. Main concepts and their interrelations3. Terms, objects4. Functions with which to handle these

Create a conceptual model based on this:• A basis for the product• Hierarchies and abstraction levels• Various ways to describe: sequential

models, interaction models, mindmaps, UED-model

• Also helps to create the softwarearchitecture and class models


10/29/2013

9

Methods for UI-designNavigation model / View map

• Displays different views/statesand transitions between them• Describes the big picture; leavethe details for later

10/29/2013TIE-13100 – Thomas Olsson

• UED: User Environ-ment Design• A model fromContextual Design

”ground plan of the UI”– Views/states/places and

links between them– Different activities, links

and information in eachof them

Methods for UI-designUED model

10/29/2013

10

UED’s simple notationA simple example from an e-mail application

3. Address book- Maintain a list of frequentlycontacted personsFunctions-browse the addresses-add a person-add person details andaddresses-add and maintain groupsLinks-send email to a person or agroupObjects-Message-Person-Person details-Group

1. Manage inbox- manage the messageFunctions-notification about a newmessage-print-show status-sort messages-delete-give attributesLinks-read message-create message/reply...Objects-message

2. Read message- See the contents of themessageFunctions-view-comment-delete-read next message-open attachmentLinks-reply-forward...Objects-sender-other recipients-subject-message text-attachments4. Create a message

-Create a new messageFunctions-edit text content-choose respondent-add attachmentsLinks-add recipient to addressbook-browse files to attach....

Double link

10/29/2013 19

UED-models• UED is based on earlier, less detailed plans and aim at

specifying the structure of the system

• However, does not yet go to details (e.g. placement of UIelements, graphics, detailed terminology)• Makes sense to identify problems or missing/excess actions

as early as possible• Focus on the workflow, simplicity of the overall system

• After this, wireframes and view templates should bedesigned– Feel free to apply the different methods and phases

case by case


10/29/2013

11

UI templates

• Creating templates for views:– first fixing the stabile parts– placing the functions, objects and linksto the screens and sketching the overview• Identifying common elements in different

views templates• More detailed than UED,

however the amount of detaildepends on the case…

• … and the tools available• Remember to follow standards

and guidelines

10/29/2013TIE-13100 – Thomas Olsson10/29/2013TIE-13100 – Thomas Olsson

Designing individual views – wireframes

• When templates are readydetailed design of individual views

• Helps maintaining consistency• Also helps later adding new

functions and views

• Wireframes = sketches ofindividual views

• Now, at the latest, is the time toreview general UI design principles

• ...and call the graphical designerand your software architect• also the first prototype tests


http://us.123rf.com/400wm/400/400/frbird/frbird1106/frbird110600014/9722246-ui-elements-for-tablet-pc-or-smart-phone-user-interface-template-vector-illustration-eps-10.jpg

10/29/2013

12

And then what?

• Detailed design of– Visual ”looks”: colors, icons, symbols, typography…– Terminology– Audio elements, animations, other outputs– Menus, configurations– Interactions: sequences of individual use cases / user tasks– Error handling and error messages– User guide and other guidance+ design of many other things that cannot be covered in one lecture+ evaluation of how the design supports the design targets & requirements(validation & verification)

Constant iterationand refinement, as usual

10/29/2013 23

Standards, style guides, guidelines, links• Standards: e.g. ISO, ITU, W3C

• More often help in technical design, not much help in concept design

• Platform-specific style guides, e.g.:• Google: http://googlesystem.blogspot.com/2008/03/googles-design-

guidelines.html• Mac OS developer library:

http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/Intro/Intro.html

• W3C mobile web: http://www.w3.org/Mobile/

• Other aspects about which there are guidelines:• Specific input/output techniques, multimodal interfaces• Mobile & ubicomp (e.g. smart environments, context-awareness)• Social media & online communities, privacy, personal information management• Special user groups, accessibility• Internationalization & localization, culture-specific guidelines


10/29/2013

13

Design guidelines and style guidesWhat aspects are often defined

• Visual structure and style– Placeholders for graphics / text– Heading and text styles– Graphical design principles, color palettes– Remember also general design principles about colors– E.g. Nokia N9: http://harmattan-dev.nokia.com/docs/ux/

• Consistency in different views/pages• Typography

– Usually: sans serif for displays; aligning text

• NB! The customer might have their own restrictions or guidelines


Some references(might be outdated…)

• Style guides (and other general guides):– GUI Design Handbook, Susan Fowler. McGraw Hill.– About Face: The Essentials of User Interface Design, Alan Cooper. IDG Books– GUI Design for Dummies, Laura Arlov. IDG Books

• WWW -style guides:– Designing Web Usability. Jakob Nielsen. New Riders. 1999.– Web Site Usability. Jared Spool, Terri DeAngelo, Tara Scanlon, Will Schroeder,

Carolyn Snyder. Morgan Kaufmann, 1998.– http://webstyleguide.com/. Patrick J. Lynch , Sarah Horton, 3rd ed. 2008.

• Other miscellaneous links• http://www.usability.gov/guidelines/• http://www.mobilexweb.com/blog/guidelines-mobile-web-design• Touch UI: http://msdn.microsoft.com/en-

us/library/windows/desktop/cc872774.aspx• http://www.blogs.com/topten/10-best-ux-user-experience-design-blogs/


10/29/2013

14

Tools for UI design & prototyping

• Free wireframing and prototyping tools that are ”good enough” for thiscourse

• http://www.balsamiq.com/, https://gomockingbird.com/ , http://mockflow.com/ ,https://clickdummy.com , https://moqups.com

• For mobile:http://www.developer.nokia.com/Resources/Tools_and_downloads/Other/Flowella/

• + commercial options:• Photoshop/Illustrator etc. Adobe products• Flash Catalyst (Adobe)• MS Visio, MS Powerpoint & the same in OpenOffice / MacOS• Design tools as part of IDE’s (Eclipse, MS Visual Studio etc.)• Axure RP Pro : http://www.youtube.com/watch?v=pjUeWOB-9RY• Silverback for recording a desktop session: http://silverbackapp.com/

• Also, HTML5 is rather easy to prototype with…


Designing User Interfaces - TUTprojekti/2013-14/UI-design-lecture_29102013.pdf · Designing User...

Documents

Transcript of Designing User Interfaces - TUTprojekti/2013-14/UI-design-lecture_29102013.pdf · Designing User...