För ett par veckor sedan lanserade Stadium en mobilanpassad sida av Stadium komplett med e-shop. Adressen är m.stadium.se och är framtagen av Brightstep. Jag hade redan vid första besöket en del synpunkter på sidan och vissa lösningar. Mailade några idéer och förslag till Brigthsteps VD Mattias Pihlström men kanske är andra intresserade så här delar jag med mig av mina synpunkter och förslag till lösningar. Jag är medveten om att det jag sett är en första (men dock skarp) release och det har redan hänt vissa förbättringar på sajten.
Mobiloptimering
Det första jag kollade på var hur väl sidan var mobilanpassad och optimerad. Inte bara till ”den lilla skärmen” (citationstecken för att skärmar nuförtiden inte är så små, speciellt inte om man ser till upplösning) utan även hur man utnyttjat mobilernas möjligheter.
Vad jag märkte när jag satt på ett svajigt 3G var att sidan laddades relativt långsamt. Det visar sig att m.stadium.se väger någonstans mellan 350-450 kB och laddar in inte mindre än 11(!) javascript. Allting är relativt och tex så väger aftonbladet.se ca 2500 kB men att optimera tyngden på en mobilsida är centralt. Alla javascript verkar dessutom inte fungera, som search-as-you-type.js som jag antar ska göra just det, jquery laddas i olika varianter men just möjligheterna med javascript verkar inte nyttjas fullt ut, se interaktionsdesign nedan.
Andra saker som inte mobilanpassats men som är lätta att fixa är:
att dölja adressfältet i Safari (fungerar på vissa sidor, inte på andra)
det saknades en fav ikon att lägga som bokmärke, den är där nu men är en gul stjärna på röd botten, knappast Stadiums riktiga ikon
det gick inte att köra sidan som webbapp, det kan man (nästan) nu, sidan blir en webbapp men när man klickar en länk så bryts det
Interaktionsdesign
Personligen tycker jag inte det är en bra lösning att lägga navigationen längst ned på det här sättet. Förstår tanken, det ska efterlikna iPhones tab bar, men problemet är att 1. webben är inte bara iPhone. Androids HIG förespråkar tex tab bar högst upp för att inte ”krocka med” hårdvaruknapparna längst ned. Windows Phone har ingen tab bar alls. 2. En tab bar ”ska” ligga statiskt så att användaren snabbt kan byta mellan de delar i appen som anses extra viktiga – och därför bör kunna nås alltid.
Nu måste användaren scrolla hela vägen ner för att komma till menyn. En lösning om menyn ska ligga längst ned är att ankarlänka från toppen ner till footern där menyn ligger, samt att jag skulle bygga om den till att vara en mer klassisk lista.
Nu ligger en tillbakaknapp alltid i övre vänstra hörnet, även på framsidan konstigt nog. Personligen tycker jag inte tillbakaknapp behövs, Safari har det redan i iOS, Android och Windows Phone som hårdvaruknappar. Här kanske man skulle kunna bygga ihop loggan samt de breadcrumbs som finns under Produkter till 1 smart navigering utan att sprida ut det.
Struktur
Jag upplever att informationsstruktuturen är lite oklar – det finns en shoppingikon i övre högra hörnet, samma funktion finns i 5:e taben i footern men även som 2: tab i footern, dvs tre länkar/ingångar till samma sida.
Menyvalet ”Meny” är alldeles för generisk och döljer dessutom ingången till Produkter. Där tycker jag man borde lyft några produktkategorier direkt på framsidan på något smart och överskådligt sätt. Kanske genom att ersätta stora bilden som säger att man kan handla direkt på m.stadium.se – för här är jag ju redan.
Innehåll och design
Sidstrukturen är densamma på stadium.se och m.stadium.se – det borde man kunna utnyttja genom att kanske vidarebefordra mobiler till m.stadium.se om man kommer till stadium.se (självklart att behålla möjligheten att besöka desktopvarianten). Här har Stadium en enorm fördel skulle jag säga!
Personligen skulle jag nedprioritera Facebook och YouTube för att inte leda bort besökare – nu ligger det dessutom innan menyn.
Touch too much
Här finns det möjligheter till förbättring för touchscreens och göra upplevelsen lite bättre för användaren.
utnyttja swipefunktionen bättre (finns i bildspel nu) för att navigera, mellan avdelningar eller inom en avdelning
använda mer teknik á la AJAX för att ladda innehåll utan att navigera till nya sidor
bättre anpassningar till touch (tänk iOS rekommendation på 44x44px eller Windows Phone 7′s 9mm), speciellt för länken till cookies och desktopversionen, men generellt skulle jag säga för knappar, ikoner och bilder
formuläranpassning där man kan anpassa tangentbordet till rätt typ (siffror vs. bokstäver etc)
lite tajtare design i allmänhet där jag inte riktigt känner igen mig från stadium.se
Måste reservera mig för att jag inte kollat in köpflödet, som är ett fullständigt köpflöde vilket jag tycker är helt rätt väg att gå. Jag har dessutom bara kollat på sajten i iPhone, inte i andra smartphones och inte i feature phones.
Har fått något fel på sidan som gör att de interna adresserna inte fungerar som det ska, det innebär tex att alla undersidor nu har har ”fula” adresser som ?page_id=26. Jag jobbar med att fixa det
There is something wrong with the perma links on my site which means that links and images doesn’t really work as they should. I am trying to fix it asap.
End of November I attended the MobX Conference in Berlin and became a lucky winner of a brand new, in Sweden not yet released, Nokia Lumia 800. Short summary of MobXCon in Swedish. The first Windows Phone 7 release from Nokia with the new ”Mango” 7.5 OS version. In this post I will try to summarize my experiences from using the Lumia hands on.
Just to give you some background info of my previous smartphone experience. I bought a iPhone 2G 2007 and used that for more than two years, have had a iPhone 3GS after that, used a HTC Desire for about 9 months and right now I am using the Lumia and a iPhone 4S.
Unfortunatly its not possible to screen dump on WP7 (unless you developer unlock it for $99 and side load a 3rd party application) and I honestly believe that it is a big draw back for users not to be able to share screen dumps and spread the word about WP7. But I will try to illustrate my examples with some images from the official Windows Phone templates PSD.
Metro, the home of non sexy fake leather icons
The whole idea of Metro is of course to not use fake leather icons with fake stitches etc. I think it’s brave of Microsoft not to go down the same path like Apple and Android when it comes to icon based navigation. WP7 is all about the use of the typography. I like it! But. I am not the typical smartphone user and I wonder how the more typical customer/user like the absent of sexy icons and a full on image GUI. To be a success WP7 (and the manufacturers) needs to attract users that at the moment are using iPhone or Android. Only time will tell.
More swipes and less taps
For me WP7 is more about swipes than taps and I like that approach. However there are of course some draw backs. In iPhone and Android users usually can access an applications five major ”sections” with just one tap. And that also gives the user a good overview of the available tasks right away. In WP7 a user needs to swipe left or right to see the available tasks. The problem is not only that a user needs to make more inputs (three swipes left to see the fourth task alternative instead of one tap in iPhone), the user doesn’t know how many tasks are available. I have covered this problem in a previous post (Swedish).
The problem with a lot of tasks is hard to solve independent of OS. In iPhone if there are more than five sections, the iPhone automatically adds the ”More” label to the fifth tab and tasks 5 to X are listed in a vertical scrollable list (the user has the option of moving tasks from the list to the tab bar replacing the default ones – a possibility not many users know of – and probably never use.
Inconsistency of the menu button
WP7 share som issues with Android when it comes to the menu button or context button (the three dots to the right in the application bar). Both is suffering from the ”right click syndrome” i.e users doesn’t know what tasks that are hidden there. At least in WP7 there is three dots indicating that something is there, in Android there is nothing telling the user if there are tasks hiding under the hardware Menu button.
Problem with WP7 is that even though the three dots are there, that doesn’t always mean more options/tasks are available. Sometimes when you press the menu button only the labels of the application menu buttons are shown, like in the native Alarms application. If the button icons are a bit unclear to the user maybe a better solution would be to show the labels on launch and then with an animation hide the labels?
Different user pattern in SMS and email
When I had used the email application for a while WP7 politely informed me that it was possible to tap left of the email title to select one or more emails to do tasks like delete several or move several emails to another folder (the same option is also available under the menu button). A nice, but not discoverable feature. Of course you imagine this functionality would be available in other apps with similar functionality like sms? No, it’s not which surprised me a lot, both being native WP7 apps. Maybe this will functionality will show up in coming OS versions and also be supported in other 3rd party applications.
Subtle notifications
Notifications is a big part of a smartphone. For the user to be updated not only on new emails and sms, but also mentions on Twitter or Facebook, that friends checked in nearby on Foursquare, if a new app version is available or that a new OS version is available.
All notifications don’t have the same value to the user though, and the billion dollar question is how to solve notifications – that easily can turn into a information overload. Former versions of iPhone treated all notifications a like, that improved in iOS5. Android has it’s notification center as toast messages in the top of the screen. Recent notifications are always visible in the notification center.
WP7 doesn’t have a notification center and relies heavily on the live tiles. Toast messages are, what I have noticed, only for sms. For some reason I can’t click the message to unlock the handset and view the entire message, but it’s is possible to swipe the toast message to the right to dismiss it. However the lock screen on WP7 gives you current status on missed calls, number of new emails or new sms.
I kind of like WP7 more subtle way to handle notifications because of my previous experience from iOS and Android. I however wish the live tiles could be even more alive in some way. And I see a problem with notifications on tiles ”below the fold”. Now only 8 small tiles are visible on the home screen without scrolling. Maybe a combination of better live tiles and a notification center would be a good solution?
Arranging and prioritizing of applications
WP7 ”only” has two screens. The home screen with all the tiles, and the screen with all applications. I like this as well. Android support 7 screens but I didn’t really use them all and didn’t know how to arrange my apps or to find them later. However I guess the 7 screens probably is a good solution if you use a lot of widgets. iPhone supports 7 screens as well but it’s also possible to sort applications (or Safari shortcuts) into folders. That is to messy for me, I have a total of 242 applications on my iPhone (most of the for UI/UX reference and this is probably not the case for the average user) and usually search for the application I am looking for.
I was a bit worried to start with when I saw the applications screen, how would find the application I am looking for without extensive scrolling? However after I installed some more applications a new feature appeared on the screen. All applications was now categorized under an clickable alphabetical button that opens up an alphabetical overview, click ”T” and jump straight to all applications beginning with T.
If that isn’t enough there is a search functionality in the applications screen as well. However that search functionality only search installed applications, not the entire handset (applications, sms, email etc) like the search functionality in iOS.
I still wonder how the home screen look when I keep adding tiles to it? Right now I have 42 tiles and the home screen looks and behaves the same. How will this be cared for both for newbies and super users?
Microsoft applications – Outlook, Internet Explorer and Bing
For me the biggest weaknesses of the WP7 is the ”old” Microsoft applications. Outlook is behaving the same as it does in the PC and doesn’t preload images in the email. I don’t know why it’s like that, but I do know that I Outlook doesn’t have an option for me as a user to turn image preloading on. Outlook also arranges emails in threads without the option to turn that feature of.
Internet Explorer is not a modern web browser on the PC and I think the same goes for the mobile version in WP7. html5 support is limited and css3 as well. It also doesn’t zoom in on the active part of a page (<div>) that both iOS and Android does.
My only concern with Bing, the default search engine on the hardware button is – I dont trust the search results. I say that with a ironic twist but I am serious. I do know Google is a competent search engine but I have no experience = trust in Bing and I think I share that lack of experience with 99% of the rest of you.
Nokia Lumia 800 – the hardware
Last but not least, the Nokia Lumia 800. I think Nokia has done a really good job with the design. It both feels and looks like a quality piece of hardware. The front glass is slightly concave towards the edge in a nice way. It’s fast and rapid when scrolling, going back or switching between applications. A nice and bright screen with good colors but not close to the iPhone 4S of course. Battery time is the big concern as for any other smartphone and the Lumia needs to be charged once a day when using it normally.
So, thats it. A not so short summary of my first impressions from using Windows Phone. Normally I write in Swedish but this time I decided to write this post in English in case someone from east (Nokia/Finland) or west (Redmond/USA) happens to stumble upon it
I will keep using the Lumia in parallell with my iPhone 4S for a while so stay tuned for more comments in a new post.
Förra veckan var jag på MobXCon i Berlin. En tvådagars workshop/konferens med ämnet ”Mobile Experience and Design & Usability”. Här sammanfattar jag mina lärdomar från de två dagarna i en post tillsammans med en Keynote som jag ska dra för kollegorna på More Mobile Relations.
Dag ett hade jag först workshop med Josh Clark, författaren till Tapworthy. Har du inte läst boken så rekommenderar jag att du gör det nu, kolla även in hans sajt där han har flera presentationer. Mycket bra och enkla tips om att designa för mobilen, här hittar du mina anteckningar i Evernote.
På eftermiddagen hade jag workshop med Darryl Feldman från Nokia i Berlin. Där diskuterade vi ”micro experiences” och var inne på ämnet om vad som händer efter ”touch” och om tekniken som en del av dig själv.
Dag två var det föreläsningar från ett antal namnkunniga personer. Jag sammanfattade mina erfarenheter i Keynoten och har delat upp erfarenheterna i:
7 mobila myter – där Josh Clark dödar vanliga föreställningar om den mobila kanalen
Designtips – även här en del från Josh Clark
User Experience – om bland annat ”non discoverability”, mönster och multitasking
Prototyping – där vi bland annat fick en demo av Fluids prototypverktyg byggt i html5 och specifikt för att prototypa mobilt
Plattformsstrategi – om hur man ska tänka strategiskt
Contentstrategi – där Karen McGrane gjorde starkt intryck på mig och fick mig att inse att WordPress ur lådan är ett dåligt CMS när det kommer till plattformsoberoende
I en paus fick vi dessutom en dragning från Microsoft om Windows Phone 7 och tankarna bakom Metro, deras GUI. Inspirerande att Microsoft gör något ”eget” och tänker bortom grafiska ikoner som ska efterlikna en analog värld. Förutom dragningen fanns det chans att vinna en Nokia Lumia 800 med Windows Phone 7 – och jag vann den!
Jätteroligt förstås, speciellt eftersom den knappt släppts i Europa och det blir min första kontakt med Windows Phone. Återkommer med en post om mina upplevelser med den, men några snabba reflektioner. Hårdvaran känns riktigt gedigen och mobilen är snygg och smidig. Grafiska gränssnittet är som sagt modernt och trevligt och för en designer som jag känns det roligt att Microsoft fokuserat på typografin. Några kommentarer dock:
Typografiska gränssnittet är modernt, men hur ”klickvänligt” kommer det vara för normalkunden, en tvåbarnsmamma från en svensk småstad som tycker läderimitationen i ”Find my iPhone” är härlig?
Outlook har förbättringsområden. Den laddar inte automatiskt in bilder (som den har gemensamt med sin storebror Outlook på PC) och jag kan inte ens ställa in att jag vill att den ska ladda in bilder. Konversationerna trådas vilket jag inte gillar, inte heller det går att stänga av
Internet Explorer… största hindret för mig är webbläsaren. Den känns gammal och omodern på PC och så även i mobilen. IE är inte en webkit-browser som tex för iPhone och Android och det märks. Ett stort problem är också att många som bygger mobilsidor för ”alla plattformar” inte anpassar den för Windows Phone – tex bygger i html5 eller med css-animationer
Återkommer dock med lite mera erfarenheter av Windows Phone så fort jag lyckas klura ut hur i h*lvete jag ska kunna skärmdumpa från den utan PC och massa hack och fultrix.
Tänkte dela med mig av en läslista med litteratur som täcker in de områden som intresserar mig mest just nu. Det innebär texter om att designa och utveckla för mobilen, ”responsive design” samt infographics och användbarhet.
Designing for the iPad: Building Applications that Sell – Chris Stevens. Intressant bok som går igenom utmaningarna med att design för iPad som jag själv märkt är annorlunda än tex att design för iPhone även fast bägge är iOS. Svårt att hitta bra böcker om att designa för iPad, men den här är bra.
I november ska jag på MobXCon conference, en tvådagarskonferens i Berlin som handlar om mobilt UX och användbarhet. Första året konferensen körs men en hel del intressanta talare på schemat.
Josh Clark som bland annat skrivit boken ”Tapworthy” som är en väldigt bra guide till design för appar, med grundläggande information och många och bra designexempel
Nancy Birkhölzer från Fjord, Fjord som bland annat ligger bakom Telias nya digitala manér
Darryl Feldman som tydligen leder arbetet med appar för Nokia/Microsoft vilket blir kul att veta mer om
Planerar och stanna någon dag efter konferensen och funderar på att hitta boende under konferensen via Airbnb, ett roligare boende där man kanske kan få lite personliga rekommendationer till Berlin.
En liten post med sajter där man kan hitta bra exempel på hur andra har löst designen på loginsidor, profiler, dela innehåll, start-up-sidor etc för framför allt iOS men även lite för Android och mobila webbsidor. Mina tips är:
Mobabled, min egna sajt där jag gjorde ett ambitiöst försök att samla design från appar och sajter, kanske borde jag bygga om den enligt samma modell som t.ex. pttrns ovan
Sett några exempel på appar som använder en ”snurrskiva” eller petmoj (för dig som minns gamla telefoner) som navigation och började fundera lite på fördelar och nackdelar med just det grafiska gränssnittet och metaforen av petmojen. Antar att det kommer därifrån för jag har knappast sett något liknande GUI innan dess och inte heller sedan dess, möjligtvis de där parkeringssnurrorna som finns i städer med gratis parkering men med tidsbegränsad parkering.
Fokus Bank en del av Danske bank samt Eniro
Först såg jag iPhone versionen från Fokus Bank i Norge och sedan även Danske Bank här i Sverige. Det visade sig att Fokus var en del av Danske Bank och som bägge utvecklats av ett företag som heter Trifork och som gjort en hel del liknande appar för banker. Sedan kom även en ny version av Eniros Android app som även den hade en snurrskiva i en del av navigationen.
Först en liten titt på Eniros version
Den är väldigt snygg med bra finish i detaljerna, snygga ikoner och snygga effekter på aktiva lägen etc. Man kan snurra på hela skivan även fast man har finget över den nedre delen av snurran. Den delen känns som ett fäste som borde ”vara i vägen” men det är inget man stör sig på. Däremot gör det att man inte ser den kompletterande texten till varje ikon eftersom man skymmer den med sin tumme (oavsett om man är vänster- eller högerhänt), och det är ett större problem.
När man tittar på snurran får man först en uppfattning att det borde vara 6 ikoner att välja mellan i och med att två fattas till vänster och det ser ut att rymmas 8 totalt. När man börja snurra visar det dock sig att det är 12 ikoner, så det är en form av en ”evighetssnurra”. En styrka för Eniro som kan ha fler ikoner än som egentligen ryms på snurran men svårt för mig som användare att veta hur många ikoner/menyval som finns och framför allt veta vilka tillgängliga menyval som finns eftersom det ger en dålig överblick. På en klassisk parkeringssnurra vet man ju att den har exakt 12 val och man vet till och med ordningen på alla menyval, både vad som kommer innan och vad som kommer efter.
Sedan kollar vi på Danske Bank
På Eniros variant så snurrar man så att det menyval man vill göra står ”klockan 12″ och sedan klickar man på centrumknappen för att aktivera. På Danske bank kan man klicka på alla synliga menyval (de som är aktiva utan att man loggar in) hela tiden, menyvalen snurrar då till ”klockan 6″ och samtidigt aktiverar man sitt val. centrumknappen här utgör ett 8:e val
På Danske bank har man just nu 7 val i snurran och man kanske kan klämma in 1-2 till om man måste. Frågan är hur få val man kan ha i en snurra. Appen för Northern Bank har bara 4 val (och saknar mittknappen) men med 4 val vinner man inte så mycket på att ha en snurra enligt mig, det innebär bara att jag måste vända och vrida på huvudet för att se vad det står. Troligtvis skulle jag inte ens använda snurran utan försöka se vad det står ändå, speciellt eftersom jag kan klicka på dem när jag vill.
När jag klickar på ett menyval i Danske Bank lämnar vi metaforen med en snurrskiva och hamnar i ett mer traditionellt GUI.
Så, vilken snurrskiva är bäst? Svårt att svara på faktiskt, bägge har sina nackdelar. Eniros är snyggast men kanske gör enkelheten och överskådligheten att Danske Banks är bättre för användaren. tror dock att min slutsats är att jag nog inte ska använda en snurrskiva i en kommande app eller i alla fall försöka se om man kan vidareutveckla idén mer. Har du några tips på en bra snurrskiva, tipsa mig gärna.
Personligen tycker jag inte det är en bra lösning att lägga navigationen längst ned på det här sättet. Förstår tanken, det ska efterlikna iPhones tab bar, men problemet är att 1. webben är inte bara iPhone. Androids HIG förespråkar tex tab bar högst upp för att inte ”krocka med” hårdvaruknapparna längst ned. Windows Phone har ingen tab bar alls. 2. En tab bar ”ska” ligga statiskt så att användaren snabbt kan byta mellan de delar i appen som anses extra viktiga – och därför bör kunna nås alltid.
Senaste kommentarer