2.8 Analyse av flerskjermsløsninger

For å se hvordan andre har løst lignende problemstillinger som jobber med i dette prosjektet, har jeg analysert deres løsninger. Her kommer en liten oppsummering av funn og tanker jeg har gjort meg rundt deres løsninger.

Wikipedia

Det er naturlig å se på hvordan Wikipedia i dag vises for de forskjellige plattformene, slik at jeg kan se hvor Wikipedia i dag kommer til kort, og hvor de gjør ting riktig.

Wikipedia for desktop og tablets

Wikipedia viser samme versjon for PC og tablets. Den er basert på et tokollonnes grid med en meny på venstresiden og innholdet i den høyre kolonnen. På enkelte artikkel-sider får man også inntrykk av at det er en tynnere høyrekolonne med faktaboks og bilder, men hovedkolonnen glir som oftest inn i denne etter hvert. Øverst er en svært enkel header med et halvveis gjemt søkefelt. For å være hovednavigasjonen på nettsiden, er dette søkefeltet lite visuelt tydelig. Siden skaleres automatisk etter hvilken skjermstørrelse den vises på. Dette gir til tider unødvendig lange linjelengder, som gjør teksten lite lesbar. Det er tydelig at denne versjonen er designet for desktop og ikke for tablets, da linker og menyelementer fort blir litt små og vanskelige å trykke på.

Link til artikkel Wikipedia - Eternal flame

Bilder er alltid presentert i liten størrelse, som oftest ikke mer enn 300px brede. Ved å klikke på et bilde for å se nærmere på det, blir man tatt til en ny side som viser bildet og masse teknisk informasjon om det. Mange bilder under hver artikkel blir i tillegg gjemt under en link nederst på siden som heter: «Images and media from Commons».

Wikipedia for smarttelefoner

Wikipedias versjon for smarttelefoner er vesentlig enklere og tydeligere enn desktopversjonen. Den er basert på et énkolonne grid med søkefelt øverst. Her har søkefeltet en mye klarer og tydeligere plass enn for på desktopversjonen. Ved å klikke på Wikipedialogoen, vises en meny som viser en hjem-knapp og link til en tilfeldig artikkel. Det første man får se av hver artikkel er en faktaboks, før man scroller nedover og får et kjapt sammendrag av innholdet. Under dette sammendraget er det en innholdsfortegnelse, hvor man må ekspandere hvert enkelt element for å få lese mer. Dette er etter min mening en smart løsning, da man raskt får et overblikk over siden, og kan ekspandere en overskrift for å lese mer om det man ønsker. Bildene er imidlertid også her unødvendig små. Det er også teksten, og til tider kan den være svært slitsom å lese. Linjelengden er derimot mye bedre, da skjermen ikke er så bred.

Hva kan jeg ta med meg videre fra Wikipedia sine løsninger over flere skjermer?

For Wikipedia sin del er det tydelig at denne løsningen ikke er laget ut i fra en «mobile first»-tankegang. Mobilversjonen er tydelig, har fokus på søkefeltet og er rask navigerbar. Dette er elementer som ikke er tatt med videre over til desktopen, noe som tydeliggjør at mobilversjonen ble laget i ettertid. Dermed har ikke desktopversjonen tatt lærdom av erfaringene som har blitt gjort rundt forenkling i prosessen med å lage en mobil versjon. Et overraskende funn var at selv om det finnes mange gode bilder for å illustrere informasjonen, blir disse ofte gjemt eller presentert veldig smått. Kan det være mulig å presentere bilder stort og tydelig uten å forstyrre leseflyten?

Facebook

Facebook er verdens største sosiale nettverk, og verdens nest mest besøkte side, rett bak Google.  På grunn av denne utbredelsen, og fordi Facebook i samme grad som Wikipedia for det meste deler tekst, men også multimedia og bilder, har det vært interessant å se nærmere på løsningen deres på andre skjermmedier som smarttelefoner og tablets.

Facebook for desktop

Facebook for desktop

Facebook for desktop baserer seg rundt oppdateringsfeeden, hvor dine venners status kommer opp i kronologisk rekkefølge. Øverst er det en karakteristisk blå menylinje med noen menyvalg, et søkefelt, og innstillinger. Siden følger et tredelt grid med en meny i venstre kolonne, oppdateringsfeeden i midten, og diverse reklame i høyre kolonne. I tillegg til dette finnes det enda en kolonne som er festet i høyre kant av skjermen med småoppdateringer og en chat. Når du skalerer ned vinduet, forsvinner denne chat-kolonnen ned i en tab nederst på siden. Dette er den eneste responsive tilnærmingen jeg har funnet på siden.

Om man ser på bilder, blir de presentert på størst mulig måte. Det er også mulighet for kommentarer under, når man klikker på dem. Bildene blir lagt som en lightbox over resten av innholdet, slik at du til enhver tid vet hvordan du kan komme deg tilbake til det tidligere brukergrensesnittet. Merkelig nok er det i bildevisningen en helt annen grid enn på brukergrensesnittet bak. En fin detalj de har lagt til, er mulighet for å navigere gjennom bildene ved hjelp av piltastene.

Facebook for iPad

Om man går inn på Facebook.com på iPad, får man en forespørsel om å laste ned appen de har utviklet. Takker man nei til dette tilbudet, kommer man til en identisk versjon til desktopversjonen av Facebook. Av denne grunn var det mer interessant å se på Facebook applikasjonen.

Facebook for iPad

Denne har et renere uttrykk enn desktopversjonen. Mer informasjon er gjemt, og det virker ryddigere. Siden har fremdeles den karakteristiske blå linjen øverst, men griddet er foreklet til to kolonner: én til nyhetsfeeden og én til chat. Det tidligere tydelige søkefeltet og venstremenyen er gjemt, og det kommer frem ved å trykke på menyknappen øverst i venstre hjørne, eller swipe mot høyre. Dette fungerer etter min mening svært bra. Venstremenyen er mer ryddig, og kan komme frem når du ønsker det, uten at den er utydelig eller vanskelig å finne. Den er også mer dempet i fargene, slik at den ikke tar all oppmerksomheten fra det mest viktige: nyhetsfeeden.

Om du skal kommentere på en statusmelding, åpner det seg opp en kolonne over chat-kolonnen, samtidig som resten av innholdet blir mørkere. Dette ser jeg som en grei løsning, da det er ønskelig å ha fokus på denne kolonnen, og det er lett å komme tilbake igjen til der du var. Dessverre er kolonnen litt vel smal, og det blir etter min mening tungvint og knotete å lese. All informasjon som vises på siden i dette øyeblikket blir trykt opp i høyre hjørne og tar rundt 15-20% av skjermplassen som er tilgjengelig. Dette er et merkelig designvalg, når det er så mye plass å ta av, og luften som skapes ikke har noe formål.

Eksempel på dårlig utnyttelse av plass ved visning av statusmelding.

Visningen av bilder i iPad-versjonen er spesielt bra. Her er det fullskjermsvisninger av bilder, og ved å swipe til høyre og venstre får man se neste eller forrige bilde. Det kommer opp en bildeoversikt nederst ved å tappe en gang på bildet. Da kommer det også opp en meny som viser «likes» og «kommentarer», slik at du kan se disse. Thumbnailsene under bildet er riktignok litt vel små, slik at de fungerer mer som en indikasjon på at det finnes flere bilder, enn at de faktisk fungerer som thumbnails med informasjon. Dessverre blir heller ikke bildeteksten som er lagt til bildene vist, og det virker ikke som det er en måte å vise denne på heller.

Facebook for iPhone

Om man går inn på Facebook.com på iPhone og logger seg inn, får man et nesten likt brukergrensesnitt som de tilbyr for appen de har utviklet. Eneste forskjellen er at animasjoner ol. ikke fungerer. Facebook-appen er bygget på samme måte som versjonen for iPad, den er bare forenklet enda mer. Fra to-kolonners grid på iPad er det her én kolonne. Menyen får man, som tidligere, frem ved å klikke på menyknappen. Swipe-bevegelsen her er fjernet, kanskje fordi det er lettere å tilfeldigvis lage den bevegelsen på iPhone, slik at menyen kommer unødvendig frem?

Facebook for iPhone. Standardvisning til venstre. Bildevisning til høyre.

Bildevisningen på iPhone er etter min mening bedre enn på iPaden, om du ser bort fra størrelsen fra bildene. Like- og kommentar-knappene er flyttet ned slik at det er lettere å nå dem. Istedenfor unødvendige små thumbnails som på iPad står det her bare hvilket bilde av hvor mange du ser på. Ellers er disse i utgangspunktet helt like med unntak av at iPhone-versjonen også viser bildeteksten som tilhører bildene.

Hva kan jeg ta med meg videre fra Facebook sine løsninger over flere skjermer?

For å få en vellykket løsning på tvers av skjermstørrelser er det viktig å forenkle. Om vi f.eks. ser på griddet til Facebook gikk det fra 3 (+1) kolonner for desktop, til 2 for tablets og 1 for smarttelefoner. Dette støtter også oppunder at «Mobile First»-tankegangen kan være riktig vei å gå, da jeg blir tvunget til å fokusere på det viktigste først. Det virker som om Facebook har benyttet seg av dette med tanke på hvor enkel og riktig smarttelefonversjonen deres er. iPadversjonen virker derimot mer som smarttelefonversjonen deres oppskalert, og tillagt et par ekstra funksjoner pga av bedre skjermkapasitet. Her tror jeg de kunne tjent på å sett med litt nye øyne på hva den nye skjermen betydde fremfor å bare oppskalere smarttelefonversjonen. Skjermstørrelsen og bruksscenarioet er et annet, så samme løsning vil ikke nødvendigvis fungere på begge plattformer. Utfordringen i prosjektet mitt blir å utnytte styrkene til hver av disse plattformene så godt det lar seg gjøre.