Webdesign | Fantblog

maj 4, 2016

Smygtitta på nya Trettisajten — första skärmdumparna

Dags att visa lite skärmdumpar från den nya sajten! Kom ihåg att detta är work in progress. Den slutgiltiga designen är exempelvis inte på plats (färger, font m.m.). Jag tar gärna emot feedback och tankar.

Sök har större plats

Sökfunktionen har en ganska liten plats på nuvarande Tretti-sajten, vilket vi fått kritik för. Det nya söket kommer att ha en tydligare plats i hur man använder Tretti. Det är en tydligare presentation av innehåll som laddas medan du skriver. Vi kommer även att berika en del populära söktermer med manuella genvägar, s.k. smart cards till avdelningar och sidor som vi vill pusha för.

Kategorisidor med upplyfta produkter

Vi har valt att skala bort menyn som ligger till vänster på tretti idag och lägga den i sidhuvudet istället. Det gör att vi får plats med filter i vänsterkolumn och kan lyfta upp kategoriernas produkter i mitten. Detta verkar vara trenden många går mot. Produkterna har fått större bilder vilket många har efterfrågat.

Produktsidor utan friktion

Även här har vi försökt att skala bort så mycket friktion som möjligt och fokusera på produkten. Större bilder, tydligare pris och andra förmåner. Eftersom vi har en del komplicerade produkter att sälja kommer att vi pusha tydligare för möjlighet att kontakta oss och få hjälp med en produkt på produktsidan.

Liknande produkter och teknisk data i samma funktion

Mycket av vår trafik kommer direkt till produktsidor från google, prisjämförelsesajter m.m. så vid designade efter doktrinen att alla produktsidor är startsidor för Tretti. Därför har vi inspirerats av s.k. lead pages där man lätt kan scrolla ner och få mer information, recensioner, tillbehör m.m. -utan att aldrig tappa köp-knappen. Vi har även slagit ihop ”liknande produkter” med ”teknisk data” vilket gör att det är lätt att jämföra den produkten man funderar på med tre andra liknande varor. Här finns det möjlighet att sälja, men just nu är det en enkel jämförelse.

Härnäst börjar vi på en välbehövlig makeover av kundvagn och kassa.

Vad tycks?

###

Denna post är nummer 51 i en serie av 100 poster i utmaningen #blogg100 där jag fokuserar på hur vi skapar Trettis nya sajt. Alla åsikter är mina egna.

maj 2, 2016

Varför jag har svårt för photoshop-drivna webbprojekt

Jag har deltagit i ganska många webbprojekt i olika roller — utvecklare, projektledare och produktägare. Under åren har jag kommit att ha väldigt svårt för projekt som i grunden bygger på Photoshop-skisser. Jag använder här Photoshop som metafor för all pixelperfekt design.

1. Iden om att allt är klart skapar tröga projekt

När man gör en Photoshopdesign över en sajt säger man att så här ska den se ut. Slutsnackat. I realiteten kommer det alltid önskemål om ändringar, tillägg och ux-analys som gör att man måste ändra designen. En Photoshop-design är väldigt trög att ändra när den väl är gjord. Det finns genvägar med att designa modulärt, men de räcker inte enligt min mening. Det blir även lätt konflikter eftersom varken designer eller produktägare vill ändra designen till kundens fördel. Det är lätt att hitta på en massa ursäkter om varför den är perfekt.

2. Design för fel skärm

Web designers jobbar gärna på stora skärmar och tänker ibland inte på hur slutanvändaren kommer att konsumera tjänsten. En riktigt dator-ovan designer som jag jobbade med tänkte inte ens på att skärmen skulle gå att scrolla på en dator. All grafik var skapad som ett statiskt A4-papper. En annan tänkte inte på att all grafik gjorde att sajtens innehåll inte syntes när man loggade in. Idag är det många som glömmer bort mobilskärmen.

3. Ogenomtänkt placeholder copy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis dui sollicitudin, ullamcorper felis eget, egestas erat. Suspendisse fringilla cursus odio, et lobortis quam suscipit eu. Sed sit amet leo dolor. Nunc condimentum nulla feugiat laoreet molestie. Curabitur a rhoncus augue. Aliquam quis dui ut sem ultricies fringilla. Proin erat magna, lacinia at maximus laoreet, commodo vitae erat. Phasellus quis fringilla lorem.

Lorem Ispum är hittepå-latin som hjälper en designer att designa perfekta textstycken till sina perfekta bilder, men som sällan rimmar med verkligheten. Det är ok med placeholder-text, men använd en riktig eller snudd på riktig text istället. En meme som följde lanseringen av den första Apple Watch, sätter fingret på min poäng.

https://twitter.com/rorysykes/status/509919085308559360

Hur och när ska man använda grafisk design då?

En grafisk profil sätter rätt prägel på varför din sajt skiljer sig från en annan. Det är teckensnitt, färgskala, hur man jobbar med bilder, logotyp och mycket mer som är superviktigt. Jobba tillsammans med utvecklare eller gör det till ett separat projekt att sminka sajten mot slutet. En grafisk designer ska heller inte behöva sitta och designa minsta detalj på en sida. Skapa hellre komponenter som kan designas individuellt och återanvändas för flera olika sidor. Tro mig, det behöver inte blir fyrkantigt och tråkigt för att man tänker till lite.

Jag tycker att den lösning vi har på Tretti fungerar bra, där vi har en frontendkodare med UX-kunskap och design-öga. Han bollar med mig och vår grafiska designer för att få ihop den bästa lösningen. Vi får allt vi behöver i designväg och samtidigt jobbar designen med koden istället för emot dem. En genomtänkt designprocess och strategi kring designen gör det lättare att byta och återanvända design.

Jag vet att detta går emot hur många andra jobbar så alla tankar om detta tar jag gärna emot.

###

Denna post är nummer 50 ien serie av 100 poster i utmaningen #blogg100 där jag fokuserar på hur vi skapar Trettis nya sajt. Alla åsikter är mina egna.

april 16, 2016

Produktfilter till vänster eller i toppen — hur vi beslutade

Förra veckan fokuserade vi på detaljer kring produktkategorier och produktlistor. Det kanske låter som en baggis men vi har diskuterat var någonstans vi ska placera produktfilter i designen. Här är de slutsater vi dragit och beslut vi tagit.

Två av marknadens bästa exempel som vi tittat på när det gäller detta är Pricerunner och Prisjakt. Om det är någon som är beroende av att det är lätt att filtrera produkter så är det dom. Det är då lite kontroversiellt att de gör precis tvärtom mot varandra. Prisjakt har filtrering ovanför produktlistan och Pricerunner till vänster.

Pricerunner har filteer till vänster om produkterna

På vår befintliga sajt ligger filter i toppen av sidan. Nu har vi beslutat oss för att flytta det till vänster om produkterna. Det finns flera anledningar till detta.

Det är viktigt att kunderna får se vilka produkter som finns i våra kategorier så fort de kommer in på sidan utan att behöva scrolla ner. För en del produkter ligger idag utbudet “below the fold” (du måste scrolla för att se)
De filter vi har tar mindre plats på sajten om de ligger till vänster om produkterna.
Det är lättare att läsa filter uppifrån och ner istället för horisontellt, vilket exempelvis vår varumärkesfiltrering har problem med idag.
På mobila enheter är det naturligt att filter finns som ett tillval till vänster. På detta sätt är det lättare att känna igen sig när man surfar mellan enheter.
Vi planerar att ha breadcrumb-navigering i vänster marginal och det rimmar bra att delvis gruppera detta med filter.

Det verkar som att vi resonerat rätt, eftersom jag just upptäckte att Prisjakt håller på att testa filter till vänster just nu. :)

###

Denna post är nummer 40 i en serie av 100 poster i utmaningen #blogg100 där jag fokuserar på hur vi skapar Trettis nya sajt. Alla åsikter är mina egna.

mars 10, 2016

Responsiv, nej adaptiv, nej responsiv!

Ok, det finns risk att jag öppnar pandoras ask här men jag välkomnar en debatt och är inte rädd att byta åsikt om jag får bra argument.

Vi kommer att bygga en responsiv design för vår nya sajt. Jag har varit på föreläsningar, läst böcker och följt diskussioner på ämnet responsiv eller adaptiv design (som är de två motpolerna som ofta målas upp). Det finns bra argument för båda beroende på kontext båda och i korthet handlar det om att en sajt antingen följer och anpassar sig efter en skärm (responsiv) eller bygger upp olika design baserat på ett fast antal skärmstorlekar/devices (adaptiv).

En adaptiv design är vad vi har idag och vi har gått så långt att det ligger som en egen kodbas. Varje gång vi gör en ändring på sajten måste vi också ändra i båda kodbaser – eller det är vad vi vill, men tiden räcker inte alltid till så de olika plattformarna fungerar olika. Detta är den främsta anledningen till att vi går till en responsiv design. En del argumenterar att det är mer jobb att bygga responsivt eftersom det är så många skärmstorlekar att testa. Vi kommer till stor del runt det med ett css-ramverk som vår frontendutvecklare Tobias byggt upp, som skalar allting enligt olika regler. Utseendet blir alltså inte bara flytande utan skalar också efter skärm.

Men kan man inte bygga en bättre sajt som är adaptiv och få igen tiden med ökade intäkter? Kanske men eftersom jag räknar med att vi behöver göra ett gäng iterationer efter lansering för att få allt rätt vill jag ha det så lättrörligt som möjligt.

Vår plan är dock att en del av sajten blir adaptiv istället för responsiv. Ett exempel vi ser idag är kassan, där beteende och val skiljer sig mycket. Du har exempelvis lättare att välja faktura en kortbetalning när du betalar på mobilen. Vissa element kommer vi positionera annorlunda och en del kommer endast att visas på vissa devices. För mobilen tittar vi på att visa olika typer av widgetar i foten, nära tummen. Thumb driven design. Kom ihåg var ni hörde det först. :)

Hoppas kunna visa några tidiga skisser snart.

###

Denna post är nummer 10 i en serie av 100 poster i utmaningen #blogg100 där jag fokuserar på hur vi skapar Trettis nya sajt. Alla åsikter är mina egna.