Skip to content
@magnushammar
GitHubTwitter

Lösryckta tankar om webbdesign

Jag bor i en ful men funktionell del av webben så jag är förmodligen fel person att fråga om design men det har ju aldrig hindrat mig från att tycka saker.

Funktionell sedan vacker design.

För mig är det alltid denna ordning som gäller. Först och främst måste man hjälpa männsikor att hitta det de söker. Helst på ett sätt som tillfredställer ögat.

Mobil kommer alltid först för mig. Det finns alltför många sajter som ser bra ut på datorn men är helt svåranvända på mobilen. Mobil design handlar mycket om ren design för att maximera utrymmet, snabb navigering samt snabba laddningstider.

En annan stor skillnad är huruvida sajtens fokus är på nya användare eller om den ska användas regelbundet. För det förstnämda tycker jag man kan ta ut svängarna lite mer medan en sajt som ska användas ofta bör vara så enkel och effektiv som möjligt.

Sajt utom tävlan :)

https://www.lingscars.com/

Sajter samt åsikter

Rent allmänt är världen (speciellt Wordpress världen) full av flashiga “landing pages” med stora bilder och fräna effekter. Tyvärr leder det ofta till en informationsöken. Jag går aldrig till en site för att fashineras av hur snygg den är, om det nu inte som idag är själva syftet med det. Normalt har jag liksom andra ett ärende. Vi vill donera, kolla adressen, bli medlem, etc. Designen måste hjälpa användaren att hitta informationen i första hand.

Jag kommer enbart tala om sajter som man ser dem i mobilen. Mobilanvändning står för hälften av trafiken till många sajter. Den lilla skärmen gör det dessutom till en större utmaning att hjälpa människor att hitta det de söker.

Stripe

Många tycker om https://stripe.com/en-se så även jag. De har en väldigt väl fungerande meny trots att den är gigantisk. Funkar väldigt bra på mobil.

  • Menyn sitter uppe till höger där man förväntar sig den. Den är födömligt snabb, inga meningslösa animationer.

  • Hero text som tydligt förmedlar sajtens fokus.

  • Två diskreta “call to action” för vanliga användarbehov.

  • Jag skulle personligen uppskattat en sökruta ovanför rubriken, det är en stor sajt med mycket information.

Stipe mobil

UGLabs

Jag ville tycka om https://www.uglabs.io/ men den är så ofokuserad och dåligt strukturerad så det blir mest gnäll.

  • Glad och emotionell design.
  • Framsidan leder dig inte vidare.
  • När man scrollar slarvar man bort massor av utrymme och fokus på de glada ikonerna som fungerar Ok på dator. Klassisk miss.
  • Dåligt fokus. De förklarar inte produkten det är mest floskler. Jag förstår fortfarande inte VAD det är och VAD de kan göra för mig.
  • När man navigerar med menyn håller de på och animerar scrollningen, det blir snabbt irriterande. Alla saker som tar längre än 0.2 sekunder bryter en människas “flow”.

UGLabs

Cards for Humanity

https://cardsforhumanity.frog.co/

  • Ett exempel på en lekfull men kanske inte effektiv design. Tänkvärd info där också om inklusive design.
  • Jag som normalt inte gillar animation gör det här, den förtydligar min mentala modell av ett kort med framsida och baksida.
  • Dessutom har de inkluderat en knapp för att stänga av animationen när man tröttnat på den. Stilpoäng!

Alt text

SJ !!!

https://www.sj.se/

  • Om vi bortser ifrån förseningarna och diverse funktionella problem, som att man inte kan boka sittplatser så man får sitta tillsammans så är sajten effektiv och håller sig till att presentera den funktionalitet som det är sannolikt att besökaren är ute efter.
  • Bra med sökruta centralt placerad
  • Det hade varit ännu bättre om ett klick på Sök resa inte laddade en ny sida utan bara expanderade “sök resa”-formuläret på samma sida, men jag är nöjd ändå.
  • De bränner för mycket utrymme ovanför SJ loggan.
  • Snyggt move med menyknappar längst ned, vilket är bra för återkommande användare.

Alt text

WWF

https://www.worldwildlife.org/

  • Föredömligt snabb laddning och bra layout rent tekniskt. Inga konstiga ojämna marginaler och felcentrerade bilder etc. som är så vanligt på mobilsajter.
  • Två call to actions längst upp.
  • Menyn funkar bra även om den kanske är lite väl avancerad
  • Inte alls såld på hur de ändrar header layouten när man klickar på Adopt, det känns jarring, som att man blev skickad till en annan sajt.

Alt text


Läkare utan gränser

https://lakareutangranser.se/vilka-vi-ar

  • Clean layout med tydlig call to action
  • Men oj så liten texten blir i loggan, där tänkte de nog inte till riktigt.
  • Menyn är ingen favorit. Jag gillar inte när rubrikerna i en multi-level meny är ett faktiskt menyval. Jag förväntar mig att undermenyn ska expandera. Här måste man trycka på den lilla symbolen till höger.

Alt text

Typeform

https://www.typeform.com/

  • Föredömligt ren design.
  • Tydligt call to action.
  • Bra meny där klick på huvudrubriker navigerar om de inte har underrubriken och expanderar menyn istället om det finns underrubriker.

Alt text