Share
Idag pratar vi med två mobila användargränssnittskonstruktörer om hur de utformar framgångsrika mobila gränssnitt och intuitiva navigationslösningar. Vi lär oss hur Sacha Greif arbetar med det begränsade utrymmet på iPad genom att använda rymdbesparande användargränssnitt. Eryk Pastwa diskuterar hur man designar för flera mobila storlekar, och hur man testar designen korrekt för maximal verklig användning i världen. Ta en titt på deras arbetsflöden och de bästa praxis som de båda lägger på plats i sina projekt.
Denna post är dag 3 i vår gränssnittsdesignsession. Creative Sessions "Session Day 2Session Day 4"Navigering är särskilt viktig för mobila gränssnitt på grund av det begränsade utrymmet och begränsade interaktioner. Människor kan inte öppna din app i flera flikar, använda kortkommandon eller skapa makron, så det är viktigt att alla delar av din app är lättillgängliga.
Skissar (visas här för LePost iPhone app) låter dig snabbt iterera genom olika idéer.
För Le Mondes tidningsapp, var navigering en av de största problemen. Hur håller du en tidningens linjära struktur, men ger snabb tillgång till en enskild sida eller artikel? Och hur utnyttjar du en tidnings vackra layout, samtidigt som du ger maximal läsbarhet på en mindre fysisk yta?
Verktyg som Omnigraffle kan hjälpa dig att planera appens övergripande arkitektur.
Först visste vi att vi ville ge två olika sätt att navigera: ett "fysiskt" läge som skulle låta dig bläddra i tidningens faktiska layout och ett "text" -läge som bara skulle innehålla artikelns innehåll. Utmaningen gjorde det enkelt att byta mellan lägen.
Vår lösning var att skapa ett rumsligt förhållande mellan varje läge.
Vår lösning var att skapa ett rumsligt förhållande mellan varje läge. Till exempel i iPhone-appen finns varje läge på parallella övre och nedre spår, och byte från en till en annan utlöser en vertikal glidande animering. Detta säkerställer att användarens mentalmodell matchar appens arkitektur. Om du bara lämnar appens sektioner som en serie av ojämna skärmar blir det mycket svårare för användaren att få en känsla av var hon står. Det är därför horisontella bildövergångar är så vanliga på iPhone.
En stor fördel med fysiska tidningar och böcker över sina digitala motsvarigheter är att du kan öppna dem på vilken sida du vill ha. Du kan börja från framsidan, men om du föredrar att läsa sportavsnittet först finns det inget som hindrar dig. Vi ville återskapa samma frihet med ett mobilt gränssnitt, så vi undersökte flera alternativ. Först lade vi till en innehållsförteckning som kan nås när som helst i appen. Det är ett mycket snabbt sätt att hoppa till en viss artikel eller avsnitt i tidningen, men vi visste att det inte var tillräckligt. Vi ville inte sänka hela tidningen till en torr lista med artiklar.
Scrubber pop-over
Så för iPad-appen, använde vi också Apples nya pop-up-UI-element i samband med en skrubber för att visa en förhandsgranskning av sidan när du "scrub" över tidningen pagination. Och för att säkerställa att den fysiska tidningen aldrig var för långt bort, lade vi till en navigeringspopel till textläget. Denna pop-up innehåller en miniatyrversion av varje sida, som låter dig trycka på en artikel för att komma åt den utan att någonsin gå ur det aktuella läget.
Delad vy
Nyckeln här är att få alla dessa funktioner ur vägen, så länge de fortfarande är upptäckbara.
Slutligen utnyttjade vi också en annan Apple UI-innovation, delad vy. När du är i liggande läge kan du använda den vänstra rutan för att navigera genom innehållsförteckningen medan du läser i den högra rutan. Med så många olika navigeringslägen finns det risk för att din app blir uppblåst och oanvändbar. Nyckeln här är att få alla dessa funktioner ur vägen, så länge de fortfarande är upptäckbara. En bra teknik för att uppnå detta är överbelastning av befintliga element.
Till exempel, i videospelare som Youtube, visar tidslinjen din position men fungerar också som en skrubber som låter dig styra den. Kontrast här med spolning och snabbspolning, vilket gör att du kan flytta dig i videon, men ger dig ingen information om din position. Om du tillämpar denna princip, när användaren är redo kommer de naturligtvis att upptäcka den funktion som hade gömt sig i vanlig syn hela tiden, och övergången mellan nykomling och strömanvändare kommer att hända sömlöst.
Sacha är en 25-årig webb- och användargränssnittare från Frankrike, som också bott i Kina, Schweiz och USA. Visa Sachas portfölj, blogg, eller följ @SachaGreif på Twitter.
Mobile är för närvarande en av de snabbast växande industrierna. Alla ser hur mycket som har förändrats i vår vardag efter att den första iPhone blev släppt 2007. Har någon lagt upp något på webben via mobila enheter före? Det här är uppenbarligen klichéer, men de visar hur snabbt saker förändras.
Låt oss komma tillbaka till 2010. Den första halvan av året tog iPad, ny iPhone med iOS 4, den helt nya Samsungs plattform: Bada, en ny version av Android-systemet och en massa nya enheter över en sexmånadersperiod. Den visar huvudpunkten för all mobil ansluten design: helt enkelt överväldigande mångfald. Det är därför vi älskar mobil så mycket.
Så varje projekt måste börja med denna mycket grundläggande fråga: vilken enhet / s vi designar för?
I allmänhet finns det på marknaden cirka sex huvudsystem där olika enheter fungerar och för vilka vi för närvarande designar och utvecklar. Var och en av dem kan arbeta med väldigt olika inmatningsmetoder och följa andra användargränssnittsriktlinjer. Så varje projekt måste börja med denna mycket grundläggande fråga: vilken enhet / s vi designar för?
Det är den första punkten som bestämmer hela vilan, det sätter utbudet av möjligheter och teknologier vi kan välja från senare och visar oss våra gränser. Vid första anblicken verkar det enkelt och enkelt, men det kan enkelt bli mycket svårt när du måste designa en applikation avsedd för många olika enheter. Vad är viktigt då? Att ge användarna den mest liknande upplevelsen oavsett system eller, i motsats till att dra nytta av mer avancerade enheter och deras teknik?
Nästa sak vi tar i beaktande redan i början är antalet beslut som ansökan måste stödja. Fråga om upplösning låter nyligen lite föråldrad när majoriteten tänker "bara" om iPhone. Men allt går tillbaka till mobila standarder - nu tänker jag på iOS måste du tänka på 320x480, 640x960 och 1024x768 resolutioner. Det är inte en stor sak när man jämför JAVA ME - om din ansökan måste fungera där borde du stödja minst tjugo olika skärmupplösningar och ännu fler fysiska storlekar!
Ansökan om Allegro skulle distribueras via Bluetooth-enheter (bluAir) under företagets årliga evenemang. Vi var tvungna att nå majoriteten av alla enheter som finns närvarande på den polska marknaden. Vi valde också JAVA ME som en plattformsram, men samtidigt fick vi stödja tjugo olika skärmupplösningar.
Enligt min mening försöker man tänka ur användarens synvinkel en grundläggande regel som är giltig för alla processprocesser och allmänt för varje kommersiell design, eftersom målet är enkelt: användarna måste uppskatta din design. Du måste definiera vad din målgrupp, vem ska använda din ansökan, vad är det innehåll du tjänar? Svar på dessa frågor kan hjälpa dig att bestämma hur du kan förbättra det ursprungliga konceptet och vad du ska göra för att hjälpa användare att enkelt hitta önskat innehåll eller att utföra de exakta uppgifterna.
Allegro applikationsfärgschema.
Allegro-ansökan var en ganska utökad dagordning. Den innehöll mycket information grupperade i flera kategorier som guidade användare genom en händelse.
Att veta dina användare bidrar också till att bestämma begränsningar. Det är helt klart att yngre användare till exempel lär sig snabbare och är mer öppna för nyfikna nyheter. Med denna marknad kan du överväga mindre vanliga eller ganska innovativa navigationssystem. Men för bankapplikationer skulle jag vara ganska konservativ och skulle försöka tänka på medelålders användare med synproblem, eftersom dessa defekter är mycket vanliga i moderna befolkningar i den åldersgruppen.
Det blir uppenbart att informationsarkitekturen i mobilen räknas ännu mer än hur sakerna ser ut.
Efter att kraven och begränsningarna har upprättats ritar vi första mockups. Vi ställer in flödet av applikationen och arbetar med layout av navigeringselementen. Så, i grund och botten, vi skapar ett skelett, vi ska på huden senare. Det är fas, när ansökan kan bli användbar och intuitiv eller inte. Grundregeln här är att hålla hela gränssnittet så enkelt som möjligt. De mobila GUI-erna måste vara riktigt raka.
Vi testa våra idéer ritade på pappersark och / eller enkla trådramar på enheter och försök att föreställa sig deras "mobila kontext". När applikationen är ganska komplex skapar vi enkla HTML-prototyper, vilket ger oss den erfarenheten som kan likna slutprodukterna.
Vi börjar också tänka på visuell estetik då, men för att vara ärlig tror jag att även den mest framstående applikationen kommer att misslyckas om navigationen inte är enkel. Självklart kan visuell design ändra det övergripande intrycket av en applikation, men i synnerhet när det gäller användarapps kan användarna dyka djupare in i dem mycket snabbt. Det blir uppenbart att informationsarkitekturen i mobilen räknas ännu mer än hur sakerna ser ut.
Allegro applikationsnavigering.
Allegro-applikationen navigerades med direktknapp eller vänster / höger tangent. Eftersom den hade hierarkisk navigering bestämde vi oss för att använda brödsmulor som visade nuvarande plats i en form av raka ikoner.
Grafisk design är säkerligen vår favorit del av hela utvecklingsprocessen. Naturligtvis bidrar visuell design till att skapa bra första intryck, men vi njuter av det främst för att vi bara älskar när våra produkter ser bra ut. Mobil grafisk design är en mycket ung disciplin, så i verkligheten undersöker vi fortfarande dess möjligheter. Om du arbetar med ett erfaret team av utvecklare är nästan ingenting omöjligt, även på fler utvecklingsvänliga plattformar.
Vi valde Pixel-teckensnitt, eftersom de var läsbara på både små och stora skärmar.
Den viktigaste regeln här är att testa mönster på riktiga enheter. Det finns en stor skillnad mellan "desktop" -skärmen och mobilskärmen, och skillnaderna ökar fortfarande. Och det handlar inte bara om pixeldensitetsskillnader utan också om färgskift. Även några av de moderna smarttelefonerna stöder fortfarande inte 16M färger, så när vi designar för sådana enheter är vi alltid medvetna om blå nyanser.
Arbetar med skärmstorlek.
Vi tar telefonerna och försöker titta på våra mönster hemma, på puben i närheten och på gatan under alla väderförhållanden, speciellt när det är väldigt soligt eller molnigt. Det här är de platser där mobila applikationer används. Vi räknar ut då var du ska justera kontrast, ändra teckenstorleken eller göra knapparna större. Denna regel är giltig oavsett om du utformar ett verktygsprogram eller bara ett enkelt spel. Vi testar alltid på det här steget, eftersom det senare är svårt att omorganisera saker senare under kodningen. Så fortsätt och testa det!
Eryk är en mycket erfaren designer från Polen. Hans arbete är koncentrerat på design för webbtjänster och mobiler. Han utvecklar intuitiva och tydliga användargränssnitt för både små och stora applikationer. Besök Eriks portfölj, kolla på det stora arbetet från Mobo Studio och följ @mobostudio på Twitter.
Accentsconagua