design af ergonomisk hmi brugerfladedau.dk/content/file_knowledge_item/ramsin_praesentation... ·...
TRANSCRIPT
Ergonomisk HMI BrugerfladeDesign af
Gode råd – med udgangspunkt i praktiske eksempler og teori
Præsenteret af: Ramsin Rommel Khamo
AGENDA
User Experience & User Interface
Hvem jeg er og hvad jeg laver
Ergonomisk HMI Design
The Good, The Bad and The Ugly
“Design er at gennemgå engrundig proces med det formålat finde løsninger på virkeligeproblemer. Design handler ikkeblot om udseende på et interface, men i høj grad om at forstå mennesker og findeløsninger på deresproblemer.”
User Experience & User Interface
UIUX &
Understanding
Design
Usable
Simple and easy to use
Useful
The system must fulfil a need/task
Field/User Research
Information Architecture
Easy to find and easy to navigate
Wireframes,
Prototypes & Tests
Look & Feel
Iconography
Interface Design
Visual Design
Brand Design
Desirable
Attractive design, easy to translate
“DESIGN FOR
THE USER, NOT
YOURSELF”
Informations Arkitektur / Sitemap /Navigation
Hierarki
Interface Design Proces
Papir/Sketch Wireframes
Design grafisk Mockup/Prototype
Implementere løsning
The Good, The Bad and The Ugly
Ergonomisk HMI Design
Ergonomisk HMI design:
Være Informativ, ikke bare vise data.
Skal være Simple, rodfri, intuitiv og have et formål.
Formål med brug af farver, former, ikoner
Nemt at skilne mellem normal ogunormal tilstand.
4-5 nøgle process indicator.
Source: https://www.isa.org/isa101/
Walter J. (2017, August 7). UX for the Industrial Environment, Part 1
(https://www.uxmatters.com/authors/archives/2017/02/jon_walter.php)
Hick-Hyman Lov (Hick’s Lov)
“Fjern støj og reducere
kognitiv belastning”
New User
Average User
Trained User
Nikolov A. (2017, March 4). Design principles: Hick’s Law – quick decision making
Source: https://uxplanet.org/design-principles-hicks-law-quick-decision-making-3dcc1b1a0632
Når en bruger bliver stresset, så få den tunnel syn
Hvis responstiden er kritisk, så hold valg afmuligheder på et minimum.Tiden det vil tage en bruger at udfører en opgave
forøges når antallet af muligheder der er tilgængeligeforøges.
Max 4-5 Nøgle Proces Indikatorer.
Repetition & Consistency
Hierarchy
Alignment
Simplicity
Design Principper:
White Space
Contrast
Proximity
As simple as possible... Intended use
Align and organize content to create order.
Items close to each other appear related.
Design elements should stand apart...
Create breathing room...
Visual weight to important elements.
Reuse same elements...
Elements have consistent look and function.
Curved vs Sharp shapes (Contour Bias)Curved for comfortablity and positive respons
Sharp to provoke thought and gain attention
Accessibility and Color Use
Mute background by using grey colors to minimize glare. Not everyone can see the full color spectrum.
Design Eksempler på Elementer:
12
Hoved Navigation (Horizontal menu) Hoved og under Navigation
Side Navigation (Vertical menu) Hoved og under, side Navigation (Inverteret L menu)
Bund Navigation
Navigations Eksempler
Source: https://www.welie.com/index.php
11
1. https://www.flaticon.com/
2. https://color.adobe.com/create/color-wheel/
4. https://www.dmcinfo.com/latest-thinking/blog/id/9285/6-tips-for-labview-ui-and-ux-design
3. https://lawsofux.com/
1
2
3
4
Questions ?
THANK
YOU