Helt enkelt – Hva er en god UX-prosess?

facebooktwittergoogle_plusredditpinterestlinkedinmailfacebooktwittergoogle_plusredditpinterestlinkedinmail


Hva er UX?

I går spurte en grafisk designer meg hva UX egentlig er? Designeren var interessert i å lære mer om UX men var redd for å ha manglende teknisk kompetanse.

Da vil jeg si at man ikke MÅ kunne kode, det viktigste er at man har evnen til å forstå hvordan dine valg som UX’er påvirker arbeidet til den som skal programmere løsningen.
Jeg har derfor laget et veldig enkelt eksempel på hva en UX-prosess kan inneholde.
Og for å gjøre det enda enklere så bruker jeg min egen blogg som eksempel.

Planen er klar som blekk…
Den verste kunden er alltid deg selv. Jeg har utrolig vondt for å godkjenne mitt eget arbeid innenfor en rimelig tidsfrist. Etter mye prokastrinering bestemte jeg meg for å holde det enkelt. Jeg er ikke et teknisk geni, så jeg la listen lavt.

Steg 1: Finn Top task: 
Om det kun er en ting du ønsker besøkende skal kunne gjøre på siden din så er dette din top task. Deres verste fiende er «Dirty magnets». Dette er linker eller elementer som hopper og ned mens de  skriker «klikk her, klikk her, jeg kan hjelpe» Mer om Dirty magnets her.
klikk_her
Mine Topp tasks:
  1. Bloggen skulle fungere på mobil og desktop (Responsivt design).
  2. Artikler skulle enkelt kunne deles i sosiale medier

Steg 2: IA eller informasjonsarkitetur.
Det høres fancy ut og noen tror kanskje man må være arkitekt for å fikse IA. Bare chill, det er ganske enkelt. Man tegner bare opp sidestrukturen til websiden med alle undersider. Husk: Hold det så enkelt som mulig. Bruk penn og papir eller last ned Xmind gratis. Xmind er ganske enkelt i bruk selv for designhoder.

Slik så min IA ut for aheadofux.no
Slik så min IA ut for aheadofux.no

Steg 3: Lag en prototype aka Wireframe
For større sider med kompleks interaksjon er det nødvendig å lage en klikkbar prototype.
Her er trikset å ikke bruke tid på farge-, font- og bildevalg. Produser den i svart/grå/hvit med dummy-bilder. Det viktige er å sjekke at alle linker, menyer og interaksjoner fungere både på mobil og desktop. Last ned Axure her http://www.axure.com/download. Axure krever litt teknisk kløkt så forvent litt tenners gnissel. Min side var såpass enkel at jeg skisset den ut for hånd.
Slik så min grove prototype ut for mobil og desktop
Slik så min grove prototype ut for mobil og desktop

 

Steg 4: Design
For større sider bruker jeg vanligvis Photoshop og designer alle hovedsider, menyer, knapper, bilder, ikoner o.s.v for både mobil og desktop. I mitt tilfelle lastet jeg ned et tema i wordpress som jeg likte og justerte farger, fonter og laget bilder tilpasset temaet.
Man kan også legge på utvidelser (widgets).
For større prosjekter har man flere gjerne steg som:
• Konseptutvikling: Finn opp kruttet på nytt.
• Personas: Skrive brukerhistorier for løsningen
• Testing
• Dokumentering til teknisk
• Front-end design
Resultat
En helt enkel lösning som fungere på mobil og desktop.
En helt enkel løsning som fungere på mobil og desktop.
Har du en god UX-prosess eller synes jeg har sagt noe latterlig gale, skrik ut eller legg igjen en kommentar.

1 comment on “Helt enkelt – Hva er en god UX-prosess?Add yours →

  1. Takk for kommentaren Eli. Først vil jeg gjerne si at en Grafisk designers skills sjelden kunne vært erstattet av en UX-designer og vice versa. Så om jeg har gjort fremskritt eller ei kan alltids diskuteres. Uansett, utfordringene i UX er i alle fall mange og spennende. Det var selvsagt ikke meningen å glemme personas og fokus på sluttbruker. Dette er en god presisering som kanskje ikke kom godt nok frem. I mitt folkelige eksempel forenkler jeg prosessen endel steg, men kan røpe at jeg tok noen intervjurunder med meg selv før lansering. Kunden ble happy 😉

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *