Designing User Interfaces TIE Thomas Olsson Unit of Human-Centered Technology (IHTE)

Size: px

Start display at page:

Download "Designing User Interfaces TIE Thomas Olsson Unit of Human-Centered Technology (IHTE)"

Zoe Nicholson
5 years ago
Views:

1 Designing User Interfaces TIE Thomas Olsson Unit of Human-Centered Technology (IHTE)

2 Contents Sprint 0: clear and mutually agreed concept! UI design: principles and aspects to consider Methods for UI design Standards, styleguides and other tools TIE Thomas Olsson

3 Agile development & UX work One generally used process 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?

4 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? 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?

5 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: Landing page in web: Just one feature

To support the concepting work Conceptual model Before detailed UI-design, investigate: 1. What the users know and understand 2. Main concepts and their interrelations 3. Terms, objects & artefacts 4.

6 To support the concepting work Conceptual model Before detailed UI-design, investigate: 1. What the users know and understand 2. Main concepts and their interrelations 3. Terms, objects & artefacts 4. 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, mind maps Also helps to create the software architecture and class models TIE Thomas Olsson 10/20/2015 6

7 Cycle 0 the Features Next, think of the use cases & functionality that the MVP 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

8 Cycle 0 the Features Examples List of user stories 1 - From stories to tasks

9 Some UI design principles to keep in mind

10 How to design usable and pleasurable UIs? Nielsen s 10 usability heuristics: Norman s design principles: Visibility, Feedback, Consistency, Mapping, Affordances Shneiderman s 8 golden rules E.g. enable shortcuts, simple error handling, reduce memoryload hneidermangoldenrules.html Use of colors: Marcus Aaron: Graphic Design for Electronic Documents and User Interfaces ISO standard : Ergonomic requirements for office work with 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 do before 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 article/good-design/54 TIE Thomas Olsson 10/20/

11 Visibility Vs

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

12 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 or condition, and errors or exceptions that are relevant to the user Clear, concise, and unambiguous language familiar to users Consider different sensory modalities TIE Thomas Olsson 10/20/

interactions Does the user really need this?

13 Simplicity Everything should be made as simple as possible, but not simpler Albert Einstein Simple is easy to recognize, approach and understand Make the most common/important tasks easy Design them first, minimize interactions 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 Vs. TIE Thomas Olsson

14 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, add more if asked by the user Concealing complexity and advanced features Expert vs. novice users TIE Thomas Olsson 14

as a teaching situation: show what action was wrong, and ensure that she/he knows how to prevent the error from

15 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 from occurring again A clearly marked "emergency exit" to leave the unwanted state TIE Thomas Olsson

16 Ordering and organizing Five main ways of organizing information: category alphabet location time continuum Check any online store or search engine 10/20/

17 Common Interactive Tasks What to at least support in your UIs Shneiderman, B., The eyes have it: A task by data type taxonomy for information visualizations. In: Proceedings of the IEEE Symposium on Visual Languages. IEEE Computer Society, pp Overview Get an overview of the collection Zoom Filter Zoom in on items of interest 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 TIE Thomas Olsson

18 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 TIE Thomas Olsson

19 Visual ways to emphasize things How to make items distinguish from a group? Form-related Surface-related Spatial Motion and animation Etc. 10/20/

20 Consistency Language and layout are just a few interface elements that need 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 TIE Thomas Olsson

21 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 Web Site Usability. Jared Spool, Terri DeAngelo, Tara Scanlon, Will Schroeder, Carolyn Snyder. Morgan Kaufmann, Patrick J. Lynch, Sarah Horton, 3 rd ed Other miscellaneous links Touch UI: TIE Thomas Olsson 10/20/

22 A few simple methods To be used after the product concept is clear and you have a priority list of user stories / use cases

23 Methods for UI-design Navigation model / View map Displays different views/states and transitions between them Describes the big picture; leave the details for later TIE Thomas Olsson 10/20/2015

24 Methods for UI-design UED model UED: User Environment Design A model from Contextual Design ground plan of the UI Views/states/places and links between them Different activities, links and information in each of them

25 UED s simple notation A simple example from an application 3. Address book - Maintain a list of frequently contacted persons Functions -browse the addresses -add a person -add person details and addresses -add and maintain groups Links -send to a person or a group Objects -Message -Person -Person details -Group 1. Manage inbox - manage the message Functions -notification about a new message -print -show status -sort messages -delete -give attributes Links -read message -create message/reply... Objects -message Double link 4. Create a message -Create a new message Functions -edit text content -choose respondent -add attachments Links -add recipient to address book -browse files to attach Read message - See the contents of the message Functions -view -comment -delete -read next message -open attachment Links -reply -forward... Objects -sender -other recipients -subject -message text -attachments 10/20/

26 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 UI elements, 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 TIE Thomas Olsson 10/20/

27 UI templates Creating templates for views: first fixing the static parts placing the functions, objects and links to the screens and sketching the overview Identifying common elements in different views templates More detailed than UED, however the amount of detail depends on the case and the tools available Remember to follow standards and guidelines TIE Thomas Olsson TIE Thomas Olsson 10/20/ /20/2015

28 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 software for the same purpose, user group, context, TIE Thomas Olsson

29 Style guides & guidelines Platform-specific style guides, e.g.: Google: Mac OS developer library: Conceptual/MobileHIG/ W3C mobile web: Of course, some of these things might affect already the concept design check them now at the latest Some of the guidelines might contradict with general UI design principles compromizes are needed TIE Thomas Olsson 10/20/

30 Other types of guidelines Search 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. TIE Thomas Olsson 10/20/

31 Designing individual views wireframes Wireframes = sketches of individual views Helps maintaining consistency Also helps later adding new functions and views 06/frbird / ui-elements-fortablet-pc-or-smart-phone-user-interface-templatevector-illustration-eps-10.jpg Now, at the latest, is the time to review general UI design principles...and call the graphical designer and your software architect also run the prototype tests TIE Thomas Olsson 10/20/

32 Tools for UI design & prototyping Free wireframing and prototyping tools that are good enough for this course For example: Check TIE Thomas Olsson 10/20/

33 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/

34 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!

35 The V-model for UX testing Requirements & product concept Information architecture and navigation Detailed UI & visual design Concept testing validation Testing the interaction and main user stories validation/verification Usability testing, automated tests, usage logging verification

36 Questions? Something UI/UX-related haunting your project?

interaction design Thanks to JoEllen Kames

1 interaction design Thanks to JoEllen Kames Motorola Mobility Consumer experience Design for presenting earlier versions of these slides in our on-campus version of this course before we start a word