78
Design Patterns What, why, how? Eva Ragnemalm Many slides by Mattias Arvola
DesignPatternsWhat,why,how?EvaRagnemalm
ManyslidesbyMattiasArvola
Today
2
• What are Design patterns? • Why use them? • Patterns for interaction and navigation • How to sketch with patterns
DesignPatterns
3
• Solutions to recurring design problems
• Problem = conflicts between forces • Solution = Generic but immediately identifiable
configuration of features • At different levels of abstraction (information
architecture/top level of app vs how to place items on the screen or little things to remember)
Tidwell’sPatterns,egFeature,searchandbrowse
6
• What • put three elements on the first page, a featured item, a
search box, a list of the contents that can be browsed
• Use When • you have lots of content and users who want to browse or
search but also want to engage users immediately
• Why • people expect this, some want to search, some to browse and
you want to hook the user by providing something of interest immediately
• How, Examples
FormingDesignProblemstoStructureWork
7
1.What should users do? 2.How should information/application be structured? 3.How should users navigate the structure? 4.How should lists be used in the design? 5.How should user perform actions? 6.How should complex data be visualised? 7.How should users input data? 8.How can social media be integrated in the design? 9.How should it be adapted for mobile devices? 10.How do I make it look good?
Designpatternsfor:InformationStructure
NavigationLayoutLists
ActionsInputMobile
9
Based on Ch. 2-6, 8, and 10 in Tidwell’s book Designing Interfaces, 2nd Ed. (O’Reilly, 2011).
InformationStructure
InformationStructure
11
• Information architecture – the art of organising an information space
• Steering the user to the part that fulfils their goals • Single pages or screens do one of these things: • Show a single thing • Show a set of things • Offers tools to create something • Supports a task
https://static1.squarespace.com/static/52cf190ce4b05933e864f776/t/5305410ce4b09336654f3f16/1392853260596/setupassistant1.jpg Singletask:Wizard 19
Navigation
Navigation
21
• Sign posts helps people to understand their immediate environment
• Wayfinding is about getting closer to your goal • Good signage means clear and straightforward
labelling and calls to action • Cues in the environment builds on conventions • Maps provide a mental image of the entire
information and interaction space
HubandSpoke
22
FullyConnected
23
Multi-levels
24
Stepwise
25
Pyramid
26
Modalpanel 29
https://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-en.html
BreadCrumbs(länkstig) 32
https://liu.se/utbildning/program/kognitionsvetenskap?l=sv
Animatedtransitions 33
https://dribbble.com/shots/1209082-Vk-Concept-for-iOS7
Layout
CenterStage 36
https://www.openstreetmap.org/#map=12/67.1564/20.6708
http://www.linkoping.se/bygga-bo-och-miljo/
ModuleTabs 39
Accordion 40
http://www.linkoping.se/bygga-bo-och-miljo/
Lists
DifferentUseCasesforLists
44
• Get an overview • Browse article by article • Search for a certain article • Sort and filter • Change order, add, remove, re-categorise articles
DimensionsofLists
45
• Length • Order • Grouping • Article type • Interaction • Dynamic behaviour
Two-PanelSelector 46
Carusel
49
https://www.amazon.co.uk/This-Service-Design-Thinking-Stickdorn/dp/1118156307/ref=sr_1_1?s=books&ie=UTF8&qid=1476637340&sr=1-1&keywords=this+is+service+design+thinking
CascadingLists
50
TreeTable
51
Actions
Howdoestheuserinterfaceaffordactions?
53
• Menu bars • Pop-up menus • Dropdown menus • Buttons • Tool bars • Links • Action panels
• Hover on object • Double click object • Keyboard • Drag-and-drop • Written commands
• Gestures?
Typesofinteraction
54
• actions represented by interface object (menu-item, buttons, links etc), activated by clicking that object.
• direct manipulation on a more or less visible object (hover over, click-and-drag, double-klick, …)
• no visible component (swipe, pinch, keyboard shortcuts, command interfaces) • How to inform the user that there is an action
available when there is nothing to show? • combinations (scrollbars, levers etc)
Pop-upmenu-radial55
ActionPanel,Buttongroup
56
Hovertools
57
Smartmenu-items
58
Otheractionpatterns
59
• Prominent Done • Patterns for time consuming actions: • Preview - provide information on what the result
will be • Progress indicator • Cancel-ability
• Pattern for long sequences of actions: • Multi-level undo • Command history • Macros
InputForms
Principlesfordesigningaform
61
• Make sure that the user knows what to do and why • Avoid asking the question at all, if you can
• good defaults • Knowledge in the world is often more correct than knowledge in
the head • autocomplete and input hints
• Be as forgiving as possible for erroneous input • Watch out for literal translation of underlying programming
model • Usability testing • Choice of controls affects what users expect to do
ChoosingControls
62
• Space • Users’ computer skills • Users domain knowledge • Expectations based on other applications • Platform and operating system
Controls
63
• Look at what is available in the user interface guidelines for the platform: • iOS • Android • Windows • MacOS
Mobile
Challengesformobileplatforms
67
• Small screens • Different screen sizes • Touchscreens • Difficulties to input text • Challenging physical environment • Social factors and limited attention
DesignApproach
68
• What do the users really need in the mobile context? • Reduce the web site or app to its core • User the hardware of the mobile device • Align the content • Optimise for the most common action sequences • Reduce scrolling and side swiping • Reduce the number of taps
FilmStrip 70
https://dribbble.com/shots/1700136-Swipe-Tutorial-Animation
www.facebook.com
Anonym
Anonym
Workingwithpatterns
SketchingwithPatterns
76
• http://www.ida.liu.se/~TDDC63/skissbok.pdf • Don’t apply it cookbook style • What is the feature that solves the problem? • Do more than one idea per pattern • Play around with the pattern
Varyingthepattern,ex:
77
• Accordion pattern (ch 4 Organising the page, p 159): What: Put items in a structure that collapses/hides unwanted subgroups.Use when: lots of heterogenous content that can be categorised but may be needed simultaneously Why: hiding unnecessary stuff eases cluttering while showing categories/titles allows recognising where to find stuff, allowing several sections to be visible simultaneously allows customisation. • a website for a flower seller: compose a bouquet • a CAD tool for mechanical engineering
