designing user interfaces - tut€¦ · designing user interfaces tie-13100 20.10.2015 thomas...

Designing User InterfacesTIE-13100

20.10.2015

Thomas OlssonUnit of Human-Centered Technology

(IHTE)

Contents

• Sprint 0: clear and mutuallyagreed concept!

• UI design: principles andaspects to consider

• Methods for UI design• Standards, styleguides and

other tools

20.10.2015TIE-13100 – Thomas Olsson 2

Agile development & UX workOne generally used process

20.10.2015 3

Source: Sy; Desirée. Adapting Usability Investigations for Agile User-centered Design.

Cycle/Spring 0 – the Concept

• What is the ”concept” (overall idea, vision) you’re working with?– What is the business problem or customer/user need you are

addressing?– If it was defined by the customer, is it meaningful? Are you both

committed to it?

20.10.2015 4

• What are the target user group(s)and contexts of use?– What do you actually know about

these?– What kind of limitations do these set?

Does the idea fit with these?– What kind of user-centered quality

goals have you set?

Cycle 0 – the Concept• Create a short ”advertizement” for the intended users

– Headline/motto/vision, picture, short description– This is the first MVP!– Important for both internal validation and for comm. with client– Examples:

• Simple video: https://www.youtube.com/watch?v=xy9nSnalvPc• Landing page in web:

20.10.2015 5

• ”Just one feature”

To support the concepting workConceptual model Before detailed UI-design, investigate:

1. What the users know andunderstand

2. Main concepts and theirinterrelations

3. Terms, objects & artefacts4. 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

• Also helps to create the softwarearchitecture and class models

10/20/2015TIE-13100 – Thomas Olsson 6

Cycle 0 – the Features

• Next, think of the use cases & functionality that theMVP needs to include…– …for communicating the concept– …for making the first tests with a prototype– …for prioritizing & scoping the project & planning sprints– …for helping specify further features

• Only after this focus on how the UI actually works– Form follows function!– Start building the UI with the most important use cases /

user stories!

10/20/2015 7

• List of user stories

• 1 - From stories to tasks

20.10.2015 8

Cycle 0 – the FeaturesExamples

Some UI design principles to keep in mind

20.10.2015 9

How to design usable and pleasurable 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


Visibility

Vs.

20.10.2015 11

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

Visibility and feedback

• Make all needed options for a given task visible– …without distracting 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 orcondition, and errors or exceptions that are relevant tothe user– Clear, concise, and unambiguous language familiar to users– Consider different sensory modalities


Simplicity• Simple is easy to recognize, approach and

understand

• Make the most common/important tasks easy– Design them first, minimize interactions


Vs.

• Does the user really need this?– Start with as little as what is neededà gradually extend– Helps prioritizing the implemented features

• Consider the visual”signal-noise ratio”

“Everything should be madeas simple as possible, but notsimpler” – Albert Einstein

Hick’s law & Progressive Disclosure• ”The time it takes to make a decision increases as the number

of alternatives increases”– Consider in designing menus

• E.g. in time-critical tasks, minimize the number of options

• Progressive disclosure: first showing just the main options, addmore if asked by the user– Concealing complexity and advanced features– Expert vs. novice users

https://experience.sap.com/post/show/63

http://www.vanseodesign.com/web-design/progressive-discolosure/

TIE-41406 – Thomas Olsson 14

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 errorfrom occurring again


• A clearly marked "emergency exit" toleave the unwanted state

Ordering and organizing

• Five main ways of organizing information:

10/20/2015 16

category

time

locationalphabet

continuum• Check any online store or

search engine

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, refinement

• 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


The structure principle• Organize the user interface purposefully, based on consistent models that

are 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


common fate

Visual ways to emphasize things

How to make itemsdistinguish from a group?• Form-related• Surface-related• Spatial• Motion and animation

Etc.

10/20/2015 19

Consistency

• Language and layout are just a few interface elements thatneed consistency. Also consider:– …shortcuts, error handling & confirmations, navigation,

information visualization– … conceptual model, used metaphors– …data formats, platform standards, earlier versions of the

product (or similar), …

– Internal & external consistency

• Consistency leads to predictability


More references & literature(might be outdated…)

• GUI design guidebooks:– 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/


A few simple methods

• To be used after the product concept is clear andyou have a priority list of user stories / use cases

20.10.2015 22

Methods for UI-designNavigation model / View map

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

10/20/2015TIE-13100 – Thomas Olsson

• UED: User EnvironmentDesign• 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

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/20/2015 25

UED-models• UED is based on earlier, concept-level plans and aim at

specifying the structure and functions of the system– Cf. a navigation map considers only the views

• 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 can be designed– Feel free to apply the different methods and phases

depending on your case


UI templates

• Creating templates for views:– first fixing the static 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/20/2015TIE-13100 – Thomas Olsson10/20/2015TIE-13100 – Thomas Olsson

Remember: reuse & benchmark

• Reuse internal and external components and behaviors– It’s not forbidden to copy or get inspired by existing solutions– UI design patterns – make users feel like at home– Norms in user manuals

• Do a benchmark (in cycle 0): other existing softwarefor the same purpose, user group, context, …


Style guides & guidelines

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

guidelines.html• Mac OS developer library:

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

https://developer.apple.com/watch/human-interface-guidelines/

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

• Of course, some of these things might affect already the conceptdesignà check them now at the latest

• Some of the guidelines might contradict with general UI designprinciplesà compromizes are needed


Other types of guidelinesSearch for these as home work!

• Specific input/output techniques, multimodal interfaces• In Web & mobile: Responsive design, Flat design• Social media & online communities, privacy, personal

information management• Special user groups, accessibility• Internationalization & localization, culture-specific guidelines• Graphical design principles, color palettes, contrast• General typography rules

– Usually: sans serif for displays; aligning text

• The customer might have their own restrictions or guidelines!In-house rules etc.


Designing individual views – wireframes

• Wireframes = sketches ofindividual views

• Helps maintaining consistency• Also helps later adding new

functions and views

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

• ...and call the graphical designerand your software architect• à also run the 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

Tools for UI design & prototyping

• Free wireframing and prototyping tools that are ”goodenough” for this course– For example:http://www.balsamiq.com/, https://gomockingbird.com/ ,http://mockflow.com/ , https://clickdummy.com , https://moqups.com

• Check http://www.cooper.com/prototyping-tools


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 iteration and refinement, as usual

10/20/2015 33

Testing the UI

• UI is a central asset in your productà test it well!• ”Verification” and especially ”validation”

– Test both with your customer and with users– In multiple phases:MVP – paper – interactive mock-up – functional UI

• A separate lecture / workshop about testing later!

20.10.2015 34

The V-model for UX testing

20.10.2015 35

Requirements& productconcept

Informationarchitecture

and navigation

Detailed UI &visual design

Concept testing”validation”

Testing the interactionand main user stories”validation/verification”

Usability testing,automated tests,usage logging”verification”

Questions?

• Something UI/UX-related haunting your project?

20.10.2015 36