design af ergonomisk hmi brugerfladedau.dk/content/file_knowledge_item/ramsin_praesentation... ·...

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