ݺߣ

ݺߣShare a Scribd company logo
User Experience
   Why do we need to care?
Användbarhet i praktiken
• Varför behöver vi bry oss?
• Gestaltlagarna (White Spaces, Grouping, Similarity, Proximity)
• Beteenden och upplevelser hos användare (Navigering, Sök, Hur
  hittar jag, Var är jag)
• Användaren och hennes digitala miljö i ett större perspektiv.
• Informationsarkitektur (Struktur, Organisation, Navigering och
  Namngivning)
Varför?
behöver vi bry oss?
Mätetal - Definition av framgång

• Vi skapar verktyg
• … som kundernas anställda använder
• … som underlättar deras vardag
• … i timmar och minuter
Timmar och minuter

• Tid som vi sparar…
• … ger n användare * tid till kunden
• 7000 användare * 5 minuter = 583 000 kronor!
• … vilket i förlängningen är det vi lever på
Intranet 2006

• Varje anställd använder 2 timmar och 30 minuter om
 dagen för att Leta efter Information
• > 90 000 anställda
• 225 000 timmar varje dag ”Leta efter Information”
• 20 000 000 USD varje dag
Gestaltlagar
Gestalt
•En rörelse som startade före WW1 inom
 experimentell psykologi
•Människan upplever bilder som ett
 välorganiserat sammanhang snarare än
 enskilda komponenter
•Helheten är viktigare än delarna
Förmågan att fylla i mönster

Skapa sammanhang
Skapa mening av kaos
Skapa ”min” tolkning
Skapa ”min” verklighet
Förmågan att fylla i mönster
Förmågan att fylla i mönster
White Spaces
• Negativ yta
• Yta mellan grafiska element:
   • marginaler
   • avstånd mellan kolumner
   • Avstånd mellan web parts
• Skapar (icke-synliga) avstånd
  mellan objekt
Grouping
Similarity
Similarity
Similarity
Similarity
Proximity
Nära blir en grupp
Att komma ihåg
• Objekt som liknar varandra - hör ihop
• Objekt som är nära varandra – hör ihop
• Objekt som grupperas tillsammans – hör ihop
• Avstånd (white space) skapar gränser
• Och?
Så vad betyder det här i praktiken?
Ett formulär:
Skapar grupper – logiska enheter
Alltid vertikala radioknappar
Knappar tillhör gruppen
Anpassa fältens bredd efter innehåll
Högerställ ”labels”
Underlätta användning (tomma ڴǰܱä)
Alternativ till ”obligatorisk ܱ貵ڳٱ”
If(mandatoryFieldsHaveContent() ==
true)
{submit.disable = false;}
Undviker Kognitiv stress
Beteenden hos användaren

 Hur hitta användaren?



      Sök      Navigering   Sök




                                                      Navigering
                            Navigering




                            Sök          Navigering    Sök
Eller så här


          Link


          Link
Inte antingen eller utan och


Användaren kommer inte till startsidan
Hon kommer till den sida sökmotorn hittat
Så snacket om Startsidan är överdriven
Informationsarkitektur

 Låt användaren se var hon är
 Titel (label)
 Breadcrumbs
 Navigering
 Organisation
 Struktur
 Ordning
 Konsekvent
Den digitala miljön i större perspektiv
• Inte bara SharePoint…
Använd konventioner
• Hitta inte på ikoner
• Uppfinn inte hjulet igen

More Related Content

Användbarhet i praktiken

Editor's Notes

  1. Först hittar man delarna: huvudet, öronen, tassarna för att sen skapa sig en helhet av det man ser. I början ser man inte ryggen, svanse eller kroppen. Hur det går till, vet vi inte – men vi vet att det fungerar. Välkommen till Psykologin!
  2. Reification eller på svenska “Förtingligande”. En konstruktiv aspect av uppfattande, där vi skapar en rumslig upplevelse av saker som inte finns. I bilden finns varken triangeln eller klotet – vi skapar det I vårt medvetande.
  3. Multistabilitet; d v s förmågan att skapa olika mönster från samma bild, och få unika uppfatfningar av vad som visas.Konstnären Oscar Reutersvärd är internationellt erkänd för att utnyttja multistabilitet I sina konstverk.
  4. Används för att skilja enheter från varandra för att tydliggöra vilka enheter som hör ihop
  5. Gruppering av element. De behöver inte vara lika för att skapa en logisk enhet.
  6. Objekt som liknar varandra – hör ihop
  7. Ibland blir det otäckt
  8. Närhet. Kolumner och rader
  9. Fisken bildas av fyra helt olika element.Cirklarna är olika, men p g a att ciklarna ligger nära varandra – hänger de ihop i en grupp
  10. Ett formulär som behöver rättas upp
  11. Radioknapparna ska vara vertikala och i linje med textfälten
  12. Knapparna ska följa samma linje som textfälten
  13. Anpassa textfält efter förväntat innehåll
  14. Två grupper ska bli en enhet
  15. Obligatoriska fält markeras med avvikande fält och ibland även med förklarande text i samma färg
  16. Constraints – se till att man inte kan skicka iväg ett formulär utan innehållAlternativ till obligatoriska fält
  17. Underlättar för användaren genom attr stödja hennes kognitiva förmåga, rak linje, anpassade fält och att bara kunna skicka när obligatoriska fält är ifyllda.
  18. Hur hittar användaren det hon söker efter?Genom sök – vidare till navigering – söker igen, kanske på webbplatsens egen sök. Fortsätter till dess användaren hittat det hon söker efter.
  19. Bakåt (Back) är den vanligaste navigeringen på webben
  20. Startisdan används i huvudsak som navigeringsstart – inte för att läsa nyheter eller hitta annat innehåll
  21. Alltid låta användaren veta var hon befinner sig genom att ha en tydlig rubrik och gärna använda breadcrumbs. Navigeringen bör visa på vilken del av webbplatsen man befinner sig. Organisera innehållet innan publicering genom en genomarbetad struktur. Ha ordning och var konsekvent.
  22. Sharepoint, Office, Outlook, CRM-system, Affärssystem, Har förmodligen en iPhone, Bankomat och plastkort med koder, Mikrovågsugnar som inte är intuitiva, fjärrkontrollen och naturligtvis ett tidrapporteringssystem. Allt detta kan skapa kognitiv stress eftersom olika system uppträder på olika sätt – ger olika feedback och uppträder olika.En anställd på en vanlig bensinmack har 25 olika system att hantera – så det MÅSTE vara uppenbart hur man sköter systemen utan att behöva läsa manualen.
  23. Tetra Pak skapade en ikon på sin kontrolpanel – som hade formen av en svala. Vad betyder den?