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

Usability Brugervenlighed

- 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

Usability Brugervenlighed Think aloud

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 ?

How we think users look at our site - and how they actually see it....

We scan the text We don’t read instructions

Usability Anvendelighed usable information Brugervenlighed Ease of use nemhed

Ludwieg Mies Van der Rohe - theory 1886-1969 Or K eep I t S imple and S hort KISS

How do we Hvordan laver vi make brugervenlige user-friendly websites? websites? 1. Lav et tydeligt visuelt hierarki 1. Create a clear visually hierarchy 2. Benyt vaner/regler (hover effects mm.) 2. Use habits/rules (hover effects mm.) 3. Bryd alle sider op i tydelige områder 3. Bryd alle sider op i tydelige områder brug Gestalt lovene Use Gestalt Laws 4. Gør klikbare områder tydelige 4. Make clickable areas clear 5. Minimer støj 5. Reduce noise

First impression Det første indtryk Scan-pages Scan-bare sider Headlines Overskrifter Small amount of text Små mængder tekst “Happy talk” minimise “Happy talk” skær til minimum text must have a meaning Tekster skal give mening Legibility Læsbarhed

The Golden ratio The longest part has to be 61,8 procent A C B E According to the book “Pretty graphic design” ” Smukkere grafisk design” by Henrik Birkvig and Design Basic Index by Jim Krause

The Golden ratio or opposite http://www.thismanslife.co.uk/projects/phiculator/

Det gyldne snit 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

Rule of thirds

Assumptions : Forudsætninger: pålideligt, Reliable Safe sikkert og and tilgængeligt available

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

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

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

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

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.

Steve Krug 3. Don’t waste my time Links that does’t work... Too much text Design for scanning the text noise

Steve Krug 4. Users still cling to their back buttons - make sure they can go back

Steve Krug 5. We’re creatures of habit

Steve Krug 6. No time for small talk

Steve Krug 7. Don’t lose search

Steve Krug 8. We form mental sitemaps

Steve Krug 9. Make it easy to go home HOME

Legibility/Fonts Serifs are far better for print reading than Sans Serifs. This has to do with how your screen displays fonts. How can we make all this happen Make it easy to get the message

UXD User Xperience Design Bruger orienteret Design

WHAT IS USER INTERFACE DESIGN? UI Design that facilitates interaction UXD = The level of satisfaction an average user gets from a product

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

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)

RULES RULE • Where am I? • What can I do here? • What should I think and feel?

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

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

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)

WHAT SHOULD I THINK AND FEEL? • Aesthetics • Tone, feel, atmosphere • Professionalism in layout and design

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

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

Making people remember

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

1. Enjoyment and desire 2. It works! 3. Less is more

Navigation or Common sense

Hierarchy:

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

Local navigation Bread crums…. or pagination

About Navigation: 1.Global (possible from all pages) Supportive (second. level - typical drop-down ) 2.Local (on a special site) Example: http://inkd.com/

Linie sekvens When do we have this? Card payment

Wireframing sitemaps

Tag cloud

Side and up http://www.illustratorgruppen.dk/

http://intothearctic.gp/en/

Groups of two Where am I? Guidelines: Site ID - What site is this? Page headlines Bread crumbs FIND a good website each Sitemap and describe it through Consistency in visual look these to each other 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 45 minutes incl. break Process progress