Usability Brugervenlighed - Its not rocket science, just plain - - PowerPoint PPT Presentation

▶
usability
SMART_READER_LITE
LIVE PREVIEW

Usability Brugervenlighed - Its not rocket science, just plain - - PowerPoint PPT Presentation

Oct 20, 2022 370 likes •1.02k views

Usability Brugervenlighed - Its not rocket science, just plain common sense Theres a good usability principle right there: if something requires a large investment of time or looks like it willits less likely to be used.

slide-1
SLIDE 1

Usability

Brugervenlighed

slide-2
SLIDE 2
  • It’s not rocket science,

just plain common sense “There’s a good usability principle right there: if something requires a large investment of time —or looks like it will—it’s less likely to be used.” Steve Krug

slide-3
SLIDE 3

Brugervenlighed

Usability

Think aloud

slide-4
SLIDE 4
slide-5
SLIDE 5
slide-6
SLIDE 6
slide-7
SLIDE 7

Why should I have to think about how I want to search? why should I have to think about how the site’s search engine wants me to write the question?

Where am I? Where should I begin? Where did they put _____? What are the most important things on this page? Why did they call it that?

slide-8
SLIDE 8

How we think users look at our site

  • and how they actually see it....
slide-9
SLIDE 9

We scan the text We don’t read instructions

slide-10
SLIDE 10

Usability Anvendelighed usable information Brugervenlighed

Ease of use nemhed

slide-11
SLIDE 11

Ludwieg Mies Van der Rohe - theory

1886-1969

Or Keep It Simple and Short KISS

slide-12
SLIDE 12
  • 1. Lav et tydeligt visuelt hierarki
  • 2. Benyt vaner/regler (hover effects mm.)
  • 3. Bryd alle sider op i tydelige områder

brug Gestalt lovene

  • 4. Gør klikbare områder tydelige
  • 5. Minimer støj

Hvordan laver vi brugervenlige websites? How do we make user-friendly websites?

  • 1. Create a clear visually hierarchy
  • 2. Use habits/rules (hover effects mm.)
  • 3. Bryd alle sider op i tydelige områder

Use Gestalt Laws

  • 4. Make clickable areas clear
  • 5. Reduce noise
slide-13
SLIDE 13

Det første indtryk

Scan-bare sider

Overskrifter Små mængder tekst

“Happy talk” skær til minimum Tekster skal give mening Læsbarhed

First impression

Scan-pages

Headlines Small amount of text

“Happy talk” minimise text must have a meaning Legibility

slide-14
SLIDE 14

According to the book “Pretty graphic design” ” Smukkere grafisk design” by Henrik Birkvig and Design Basic Index by Jim Krause A C B E

The longest part has to be 61,8 procent

The Golden ratio

slide-15
SLIDE 15

http://www.thismanslife.co.uk/projects/phiculator/

The Golden ratio

  • r opposite
slide-16
SLIDE 16

The sides of the Egyptian pyramids were golden triangles. Additionally, the three-four-five triangle is a golden ratio between the five unit side and the three unit side. The Egyptians considered this kind of right triangle extremely important and used it also in the pyramids.

Det gyldne snit

slide-17
SLIDE 17

Det gyldne snit

slide-18
SLIDE 18

Rule of thirds

slide-19
SLIDE 19

Forudsætninger:

Assumptions:

pålideligt, sikkert og tilgængeligt

Reliable Safe and available

slide-20
SLIDE 20

5 gyldne regler: Let at lære Let at huske Effektivt at bruge Forståeligt Tilfredsstillende at bruge 5 Golden rules: Easy to learn Easy to remember Efficient to use Easy to understand Satisfactory Rolf Mölich’s Rolf Mölich

slide-21
SLIDE 21

Disasters Katastrofer

When a user not is able to do what they were aiming for...... Når en bruger ikke er i stand til at udføre det de kom for....

slide-22
SLIDE 22

http://www.flickr.com/photos/nofrills/4130450141/

slide-23
SLIDE 23

Steve Krug

  • 1. Don’t make me think

Be in the users shoes! If you think it’s to difficult - it probably is “Get rid of half the words on each page, then get rid of half of what’s left.” But that one gets its own chapter later

Use Gestalt Laws for making proximity - break up pages into clearly defined areas

slide-24
SLIDE 24
slide-25
SLIDE 25

Steve Krug

  • 2. Web applications should

explain themselves

What is it about - make it clear

Visual Hierarchy is important

Never Horizontal Scroll In the Western world we read from left to right, top to bottom. Because of this, scrolling horizontally is not easy. Take care that your users screen resolution is wide enough for your site.

slide-26
SLIDE 26

Steve Krug

  • 3. Don’t waste my time

Links that does’t work... Too much text Design for scanning the text noise

slide-27
SLIDE 27
slide-28
SLIDE 28
  • 4. Users still cling to their back buttons

Steve Krug

  • make sure they can go back
slide-29
SLIDE 29

Steve Krug

  • 5. We’re creatures of habit
slide-30
SLIDE 30

Steve Krug

  • 6. No time for small talk
slide-31
SLIDE 31
  • 7. Don’t lose search

Steve Krug

slide-32
SLIDE 32
  • 8. We form mental sitemaps

Steve Krug

slide-33
SLIDE 33

Steve Krug

  • 9. Make it easy to go home

HOME

slide-34
SLIDE 34

How can we make all this happen

Serifs are far better for print reading than Sans Serifs. This has to do with how your screen displays fonts.

Legibility/Fonts Make it easy to get the message

slide-35
SLIDE 35

UXD

User Xperience Design Bruger orienteret Design

slide-36
SLIDE 36

WHAT IS USER INTERFACE DESIGN? UI UXD =

The level of satisfaction an average user gets from a product

Design that facilitates interaction

slide-37
SLIDE 37

WE HAVE THE WEBSITE BECAUSE OF THE USERS

  • Treat them as you would a guest in your home
  • Be friendly and and respect their time and needs
  • Clean up the mess before they come
  • Make it easy and convenient for the them to use your place
  • Don’t expect them to know your house as well as you do
  • Create a pleasant atmosphere
slide-38
SLIDE 38
slide-39
SLIDE 39
slide-40
SLIDE 40
slide-41
SLIDE 41

BENEFITS

  • A better chance of them finding what the came for
  • A better chance of understanding all they can do, and not

just the stuff they accidentally meet

  • You can steer them
  • They will have success experience and feel smarter and

better about them selves (- and thereby helping world peace)

slide-42
SLIDE 42

RULES RULE

  • Where am I?
  • What can I do here?
  • What should I think and feel?
slide-43
SLIDE 43

WHERE AM I?

  • Global id
  • Title tags
  • Page headlines
  • Bread crumbs
  • Site map
  • Consistency in visual look
  • URL
  • Highlighted link
  • No link to same page
  • Logo links to home page
slide-44
SLIDE 44

WHAT CAN I DO?

  • Be clear
  • Minimize visual clutter
  • Organize content
  • Unambiguous labels
  • Navigation
  • Multiple ways to access
  • Divide pages in clearly defined areas, e.g. by boxes
  • Respect conventions
  • Underlined links
  • Mouse over effects
  • Hand icon
  • Submit buttons
  • Readable text
  • Size, contrast, type
  • Above the “fold” content
slide-45
SLIDE 45

WHAT DO YOU WANT ME TO DO?

  • Visual hierarchy
  • Contrast
  • Color
  • Size
  • Lines and composition
  • Eye tracking
  • “Call for Action” buttons
  • Multiple ways to access
  • Process preview (e.g. step 3 out of 5)
slide-46
SLIDE 46

WHAT SHOULD I THINK AND FEEL?

  • Aesthetics
  • Tone, feel, atmosphere
  • Professionalism in layout and design
slide-47
SLIDE 47

TIPS’N TRICKS

  • Horizontal navigation or vertical?
  • don’t do both
  • Many users navigate through “Search” field
  • Keep text short, bullet pointed and “skimmable”
  • Do “Print” version of your content
  • Date your content
slide-48
SLIDE 48

The typical user in focus

What the typical user needs depends on CONTEXT (diff. user scenarios)

What it does vs. how it works in interaction with the user

Every product that is used by someone has a UX
slide-49
SLIDE 49

Making people remember

slide-50
SLIDE 50

Scrolling sideways... and up and down... very big and mysterious

slide-51
SLIDE 51
  • 2. It works!
  • 1. Enjoyment and desire
  • 3. Less is more
slide-52
SLIDE 52

Navigation

  • r

Common sense

slide-53
SLIDE 53

Hierarchy:

slide-54
SLIDE 54

Web: All available

Line tabs are global, can be seen from all sides. Drop down are supportive, local Local navigation: Links and scroll down

slide-55
SLIDE 55
slide-56
SLIDE 56
slide-57
SLIDE 57

Local navigation Bread crums….

  • r pagination
slide-58
SLIDE 58

About Navigation:

1.Global (possible from all pages)

Supportive

(second. level - typical drop-down)

2.Local (on a special site)

Example: http://inkd.com/

slide-59
SLIDE 59

Linie sekvens

When do we have this?

Card payment

slide-60
SLIDE 60

Wireframing sitemaps

slide-61
SLIDE 61

Tag cloud

slide-62
SLIDE 62

http://www.illustratorgruppen.dk/

Side and up

slide-63
SLIDE 63

http://intothearctic.gp/en/

slide-64
SLIDE 64

Where am I?

Site ID - What site is this? Page headlines Bread crumbs Sitemap Consistency in visual look URL Logo links to home “You are here indicators” Search indicators

What can I do here?

Organize content Labels naming Proximity Clear visual hierarchy

What do you want me to do?

Call to action-buttons Process progress Guidelines:

FIND a good website each

and describe it through these to each other

Groups of two 45 minutes incl. break