4.5 Elementoversikt

Det endelige resultatet mitt er en nytenkning av hvordan Wikipedia kan se ut på smarttelefoner og nettbrett. I dette delkapittelet vil jeg gå nærmere inn på de forskjellige elementene som til sammen danner helheten.

Logo og profil

Jeg har i denne oppgaven valgt å ikke benytte meg av en logo. Som jeg skrev i delkapittelet 2.4 Avgrensning ønsket jeg ikke å se på profilen til Wikipedia i denne oppgaven, og det å benytte seg av Wikipedias eksisterende profil ville vært for begrensende. Det har derfor vært mulig i all hovedsak å la funksjonalitet bestemme designet, og i den grad det kan kalles en profil er det innholdet på Wikipedia som danner dette, sammen med det nye søkefeltet.

Søk

Søkefeltet har jeg plassert nederst på skjermen både på versjonen for iPad og iPhone. Dette er det eneste elementet som er likt på tvers av alle plattformer og alle sider. En vanlig konvensjon på nettsider er å plassere søkefeltet øverst til høyre. Grunnen til at jeg har plassert det nederst på skjermen er at tastaturet på disse enhetene plutselig dukker opp nedenifra når du skal søke. Det er dermed naturlig å knytte søkefeltet opp mot tastaturet, slik at den begrensede skjermplassen ikke er delt opp i et søkefelt, et søkefelttreff og så tastatur, men at søkefeltet og tastaturet heller danner en enhet sammen slik at søket ikke blir så oppstykket.

Når det gjelder søkefeltet har jeg gått vekk fra å lage en søkeknapp, da dette ikke er nødvendig på disse enhetene. En naturlig bruksflyt er å benytte seg av den blå søkeknappen som dukker opp på tastaturet når du er i søkemodus. For å få frem at det er et søkefelt har jeg lagt inn et ikon for forstørrelsesglass, som er standardikon for søk. Bak dette ikonet står det «Search Wikipedia». Så snart du trykker på dette feltet vil denne teksten forsvinne og du vil se en blinkende blå strek som indikerer at du kan begynne å skrive. Søkefeltet er mørkt, med et subtilt mønster for å skille seg fra resten av innholdet. På denne måten blir det et tydelig element, samtidig som det ikke er forstyrrende.

Farger

Som tidligere nevnt har det vært viktig at innholdet er i fokus. Jeg har derfor holdt meg til et avdempet fargekart. Fargevalgene er blant annet basert på hva som gir best leselighet. Bakgrunnsfargen er lys grå for at litt mindre lys skal reflektere mellom ordene, og dermed blir det lettere for øynene å lese. 1 Søkefeltet er mørkt, for å tydelig skille seg fra resten av innholdet, uten å være for dominerende. Som en indikator for at teksten i søkefeltet er redigerbar er det en blå strek. Dette er en vanlig redigeringsstrek som har farge etter standard-blåfargen i iOS. Grunnen til dette er at når tastaturet kommer opp lyser det opp en blå søkeknapp nederst på tastaturet. Ved å benytte samme blåfarge oppe i søkefeltet når du skriver knyttes disse mer naturlig opp mot hverandre.

En fargepalett over hovedfargene i løsningen min.

Typografi

Etter å ha testet ut forskjellige fonter som default-font på Wikipedia i en periode, samt prøvd ut forskjellige størrelser, linjelengder og avstander på de forskjellige enhetene endte jeg til slutt opp med Azuro som det endelige fontvalget. Denne fonten er testet på enhetene jeg har designet for helt siden begynnelsen av designprosessen, og er en font med stor personlighet slik at de forskjellige tegnene lett skal kunne skilles fra hverandre. Azuro har høy x-høyde, lav kontrast og tydelige individuelle former og passer dermed bra for skjerm.

Som tidligere nevnt ønsket jeg å prøve ut «Modular scale» i forhold til typografien og designet i dette prosjektet. Etter å ha prøvd ut diverse varianter forkastet jeg riktignok den tanken. Det ble for begrensende at alt skulle passe til disse tallene, og at dette f.eks. skulle styre linjelengden fremfor hva som fungerte lesemessig. Den var derimot lovende i forhold til hirearki på de forskjellige overskriftene og fontstørrelsene. Det er mulig å lese mer om mine erfaringer med modular scale på prosessbloggen min.

Grid

Strukturen på designet mitt er veldig tydelig og klar. På nettbrett-versjonen er alle sider (untatt søket) delt inn i et bilde øverst, deretter hovedsakelig tekst-innhold, og så er søket nederst. På smarttelefon-versjonen er dette forenklet til innhold øverst og søk nede i bunnen. Forsiden på nettbrett-versjonen er delt opp i en tredelt spalte hvor hver spalte representerer henholdsvis «spesielt utplukkede artikler» (featured articles), populære artikler og nyhetsaktuelle artikler.

Bilder

Det mest kontroversielle valget jeg har tatt i dette prosjektet er nok hvordan jeg har valgt å presentere bilder på nettbrett-versjonen. Jeg har valgt å skille de fra teksten og ha de i et eget felt over teksten. Grunnen til dette er at du skal kunne få fokus når du leser og kunne se bildene i stor størrelse når du ønsker å se på disse. Dette bygger også godt under kjernebegrepene mine for begge plattformer: Enkelhet og innhold, samt kjernebegrepene for nettbrett: utforskende og dybde.

Knapper og ikoner

Det har vært viktig for meg at knapper har vært tydelige og store nok å trykke på. Alle knapper gir derfor litt inntrykk av at de «kommer litt ut fra skjermen». Etter brukertesten var det tydelig at alle ikonene ikke snakket helt for seg selv, noe det gjerne er lett for når du er nødt til å lage noen helt nye ikoner som fjern/vis linker og fjern/vis referanser. Jeg fant derfor ut at jeg måtte knytte ikonene opp mot en forklarende tekst, uten at dette var synlig hele tiden. Løsningen ble dermed å lage en meny-knapp hvor du kunne fjerne/vise denne menyen med de forskjellige funksjonene.


De frittstående knappene i løsningen min. De resterende knappene har tilhørende beskrivelser.

MapScroll™

En av de mest innovative løsningene mine for å få mer orden og oversikt i artiklene på nettbrett-versjonen er en funksjon jeg har kalt MapScroll™. Fremfor å vise en liste over innholdet slik som er vanlig i Wikipedia-artikler har jeg flyttet denne informasjonen til scrollbaren, slik at du ved å holde her får se hvor du er i teksten og raskt kan scrolle til det området i artikkelen som du er ute etter. Normalt ser du ikke scrollbaren i iOS, men å vise denne er en konvensjon de fleste er vant til fra datamaskiner, og løsningen rydder dermed opp i artikkelen samtidig som det blir lettere å finne frem.

Fotnoter:

  1. When to Use White Text on a Dark Background (nedlastet 11.november 2011)