Share
Vandaag chatten we met twee mobiele gebruikersinterfaceontwerpers over hoe ze succesvolle mobiele interfaces en intuïtieve navigatie-oplossingen ontwerpen. We zullen leren hoe Sacha Greif werkt met de beperkte ruimte op de iPad door ruimtebesparende UI-elementen te gebruiken. Eryk Pastwa bespreekt hoe te ontwerpen voor meerdere mobiele formaten en hoe je ontwerpen goed kunt testen voor maximaal gebruik in de echte wereld. Neem een kijkje in hun workflows en de best practices die ze beiden toepassen in hun projecten.
Dit bericht is dag 3 van onze Interface Design Session. Sessiedag 2 sessie dag 4 van Creative SessionsNavigatie is vooral belangrijk voor mobiele interfaces vanwege de beperkte ruimte en beperkte interacties. Mensen kunnen uw app niet openen op meerdere tabbladen, geen sneltoetsen gebruiken of macro's maken. Het is dus van vitaal belang dat elk onderdeel van uw app gemakkelijk toegankelijk is..
Met schetsen (hier weergegeven voor de LePost iPhone-app) kunt u snel verschillende ideeën herhalen.
Voor de krant-app van Le Monde was navigatie een van de grootste zorgen. Hoe houd je de lineaire structuur van een krant, maar krijg je snel toegang tot elke pagina of artikel? En hoe profiteer je van de mooie lay-out van een krant, terwijl je nog steeds maximale leesbaarheid op een kleiner fysiek oppervlak hebt?
Tools zoals Omnigraffle kunnen u helpen bij het plannen van de algehele architectuur van de app.
Ten eerste wisten we dat we twee navigatiemodi wilden aanbieden: een "fysieke" modus waarmee je door de werkelijke lay-out van de krant kunt bladeren en een "tekst" -modus die alleen de inhoud van het artikel zou bevatten. De uitdaging was om gemakkelijk tussen modi te schakelen.
Onze oplossing was om een ruimtelijke relatie tussen elke modus te creëren.
Onze oplossing was om een ruimtelijke relatie tussen elke modus te creëren. In de iPhone-app bijvoorbeeld, bestaat elke modus op parallelle bovenste en onderste sporen en schakelt het overschakelen van de ene naar de andere een verticale schuifanimatie. Dit zorgt ervoor dat het mentale model van de gebruiker overeenkomt met de architectuur van de app. Als je de secties van je app gewoon achterlaat als een reeks losse schermen, wordt het veel moeilijker voor de gebruiker om een idee te krijgen van waar ze staat. Dit is de reden waarom horizontale dia-overgangen zo vaak voorkomen op de iPhone.
Een groot voordeel van fysieke kranten en boeken over hun digitale tegenhangers is dat u ze op elke gewenste pagina kunt openen. Je kunt vanaf de voorpagina beginnen, maar als je liever eerst het sportgedeelte leest, houdt niets je tegen. We wilden diezelfde vrijheid opnieuw creëren met een mobiele interface, dus we hebben verschillende opties onderzocht. Eerst hebben we een inhoudsopgave toegevoegd die op elk moment in de app toegankelijk is. Het is een zeer snelle manier om naar een specifiek artikel of sectie in de krant te gaan, maar we wisten dat dit niet genoeg was. We wilden de hele krant niet terugbrengen tot een droge lijst met artikelen.
De scrubber pop-over
Dus voor de iPad-app hebben we ook Apple's nieuwe pop-over UI-element in combinatie met een scrubber gebruikt om een pagina-voorbeeld weer te geven wanneer je "scrubt" over de paginering van de krant. En om ervoor te zorgen dat de fysieke krant nooit te ver weg was, hebben we een navigator-pop-over toegevoegd aan de tekstmodus. Deze pop-over bevat een miniaturenversie van elke pagina, waarmee u op een artikel kunt tikken om het te openen zonder de huidige modus te verlaten.
De gesplitste weergave
De sleutel hier is om al die functies uit de weg te ruimen, zolang ze nog steeds vindbaar zijn.
Ten slotte hebben we ook gebruik gemaakt van een andere Apple UI-innovatie, de gesplitste weergave. In de liggende modus kunt u het linkerdeelvenster gebruiken om door de inhoudsopgave te navigeren tijdens het lezen in het rechterdeelvenster. Met zoveel verschillende navigatiemodi bestaat het risico dat uw app opgeblazen en onbruikbaar wordt. De sleutel hier is om al die functies uit de weg te ruimen, zolang ze nog steeds vindbaar zijn. Een goede techniek om dit te bereiken is bestaande elementen te overbelasten.
Bijvoorbeeld, in videospelers zoals Youtube's, geeft de tijdlijn je positie aan maar fungeert het ook als een scrubber waarmee je het kunt besturen. Stel dit in contrast met terugspoelen en snel vooruitspoelen, waarmee je in de video kunt bewegen, maar geen informatie krijgt over je positie. Als u dit principe toepast, zullen de gebruikers die klaar zijn vanzelfsprekend de functie ontdekken die zich al die tijd in het oog had verborgen, en de overgang tussen nieuwkomer en hoofdgebruiker verloopt naadloos.
Sacha is een 25-jarige web- en gebruikersinterfaceontwerper uit Frankrijk, die ook in China, Zwitserland en de VS heeft gewoond. Bekijk de portfolio van Sacha, blog of volg @SachaGreif op Twitter.
Mobiel is momenteel een van de snelstgroeiende industrieën. Iedereen ziet hoeveel er is veranderd in onze dagelijkse omgeving nadat de eerste iPhone in 2007 werd uitgebracht. Had iemand eerder iets via internet op mobiele apparaten geplaatst? Dit zijn duidelijk clichés, maar ze laten zien hoe snel dingen veranderen.
Laten we teruggaan naar 2010. De eerste helft van het jaar bracht de iPad, nieuwe iPhone met iOS 4, het vrij nieuwe Samsung-platform: Bada, een nieuwe versie van het Android-systeem en een heleboel nieuwe apparaten over een periode van zes maanden. Het toont het kernpunt van alle mobiel verbonden ontwerp: simpelweg overweldigende diversiteit. Dat is waarom we zo van mobiel houden.
Dus elk project moet beginnen met deze zeer fundamentele vraag: voor welk apparaat / welke we ontwerpen?
Over het algemeen zijn er op de markt ongeveer zes hoofdsystemen, waarop verschillende apparaten werken en waarvoor we momenteel ontwerpen en ontwikkelen. Elk van hen kan werken met zeer verschillende invoermethoden en andere gebruikersinterfacerichtlijnen volgen. Dus elk project moet beginnen met deze zeer fundamentele vraag: voor welk apparaat / welke we ontwerpen?
Het is het eerste punt dat de rest bepaalt, het bepaalt het scala aan mogelijkheden en technologieën waaruit we later kunnen kiezen en toont ons onze grenzen. Op het eerste gezicht lijkt het eenvoudig en eenvoudig, maar het kan heel moeilijk worden, wanneer je een applicatie moet ontwerpen die bedoeld is voor veel verschillende apparaten. Wat is dan belangrijk? Gebruikers de meest vergelijkbare ervaring bieden, ongeacht het systeem of, in tegendeel, om te profiteren van meer geavanceerde apparaten en hun technologieën?
Het volgende waar we aan het begin rekening mee houden, is het aantal resoluties dat de applicatie moet ondersteunen. Vragen over de resolutie klinkt onlangs een beetje verouderd als de meerderheid "alleen" denkt aan de iPhone. Maar alles gaat terug naar mobiele normen. Als je nu aan iOS denkt, moet je denken aan de resoluties van 320x480, 640x960 en 1024x768. Het is geen probleem als je het vergelijkt met JAVA ME - als je toepassing daar moet werken, moet je ten minste twintig verschillende beeldschermresoluties en zelfs meer fysieke formaten ondersteunen!
De aanvraag voor Allegro moest worden gedistribueerd via bluetooth-apparaten (bluAir) tijdens het jaarlijkse evenement van het bedrijf. We moesten op dat moment het merendeel van alle apparaten op de Poolse markt bereiken. We kozen ook voor JAVA ME als een platformonafhankelijk framework, maar tegelijkertijd moesten we eenentwintig verschillende beeldschermresoluties ondersteunen.
Naar mijn mening is proberen te denken vanuit het oogpunt van de gebruiker een basisregel, geldig voor elk UI ontwerpproces en in het algemeen voor elk commercieel ontwerp, omdat het doel eenvoudig is: gebruikers moeten uw ontwerp waarderen. U moet definiëren wat uw doelgroep is, wie uw applicatie gaat gebruiken, wat zit er in de inhoud die u serveert? Antwoorden op deze vragen kunnen u helpen bepalen hoe u het oorspronkelijke concept kunt verbeteren en wat u moet doen om gebruikers te helpen de gewenste inhoud gemakkelijk te vinden of om de exacte taken uit te voeren.
Allegro-toepassingskleurenschema.
De Allegro-applicatie was een vrij uitgebreide agenda. Het bevatte veel informatie die was gegroepeerd in verschillende categorieën die gebruikers door een evenement leidden.
Het kennen van uw gebruikers helpt ook om de beperkingen te bepalen. Het is vrij duidelijk dat jongere gebruikers bijvoorbeeld sneller leren en meer open staan voor nieuwsgierig nieuws. Met deze markt kunt u minder vaak voorkomende of vrij innovatieve navigatiesystemen overwegen. Maar voor banktoepassingen zou ik eerder conservatief zijn en zou ik proberen na te denken over gebruikers van middelbare leeftijd met problemen met het gezichtsvermogen, omdat deze defecten heel gebruikelijk zijn in moderne populaties van die leeftijdsgroep.
Het wordt duidelijk dat informatiearchitectuur op mobiel zelfs belangrijker is dan hoe de dingen eruitzien.
Nadat de vereisten en beperkingen zijn vastgesteld, tekenen we eerste mockups. We stellen de stroom van de applicatie in en werken aan de lay-out van de navigatie-elementen. Dus eigenlijk maken we een skelet, we gaan het later bekladden. Het is de fase waarin de applicatie bruikbaar en intuïtief kan worden of niet. De basisregel hier is om de hele interface zo eenvoudig mogelijk te houden. De mobiele GUI's moeten heel eenvoudig zijn.
We testen onze ideeën op papier en / of eenvoudige wireframes op apparaten en proberen ons hun 'mobiele context' voor te stellen. Wanneer de toepassing vrij complex is, maken we eenvoudige HTML-prototypen, die ons de ervaring bieden die sterk kan lijken op eindproducten.
We beginnen ook na te denken over visuele esthetiek, maar eerlijk gezegd denk ik dat zelfs de meest opmerkelijk ogende applicatie zal falen als de navigatie niet eenvoudig is. Natuurlijk kan visueel ontwerp de algehele indruk van een applicatie veranderen, maar vooral in het geval van utility-apps duiken gebruikers er dieper in. Het wordt duidelijk dat informatiearchitectuur op mobiel zelfs belangrijker is dan hoe de dingen eruitzien.
Allegro-toepassingsnavigatie.
De Allegro-applicatie werd genavigeerd met directe pad of met de linker / rechter harde toetsen. Omdat het een hiërarchische navigatie had, hebben we besloten om broodkruimels te gebruiken die de huidige locatie in een vorm van recht toe recht aan pictogrammen toonden.
Grafisch ontwerp is zeker ons favoriete onderdeel van het hele ontwikkelingsproces. Natuurlijk helpt visueel ontwerp om een goede eerste indruk te maken, maar we genieten er vooral van omdat we er dol op zijn als onze producten er geweldig uitzien. Mobiel grafisch ontwerp is een zeer jonge discipline, dus in werkelijkheid zijn we nog steeds bezig met het verkennen van de mogelijkheden. Als je met een ervaren team van ontwikkelaars werkt, is bijna niets onmogelijk, zelfs op meer ontwikkelingsonvriendelijke platforms.
We kozen voor Pixel-lettertypen, omdat ze leesbaar waren op zowel kleine als grote schermen.
De belangrijkste regel hier is om ontwerpen te testen op echte apparaten. Er is een groot verschil tussen het "bureaublad" -scherm en het mobiele scherm en deze verschillen nemen nog steeds toe. En het gaat niet alleen om verschillen in pixeldichtheid, maar ook om kleurverschuivingen. Zelfs sommige moderne smartphones ondersteunen nog steeds geen 16 miljoen kleuren, dus wanneer we ontwerpen voor dergelijke apparaten, zijn we ons altijd bewust van blauwe tinten.
Werken met schermgrootte.
We nemen de telefoons en proberen onze ontwerpen thuis, in de pub in de buurt en op straat te bekijken in alle weersomstandigheden, vooral als het erg zonnig of bewolkt is. Dit zijn de plaatsen waar mobiele applicaties worden gebruikt. We bepalen dan waar we het contrast kunnen aanpassen, de lettergrootte kunnen wijzigen of de knoppen groter kunnen maken. Deze regel is geldig, of je nu een hulpprogramma of een eenvoudig spel ontwerpt. We testen altijd in dit stadium, want later tijdens het coderen is het soms erg moeilijk om dingen opnieuw in te delen. Dus ga door en test het!
Eryk is een zeer ervaren ontwerper uit Polen. Zijn werk concentreert zich op ontwerp voor webservices en mobiele telefoons. Hij ontwikkelt intuïtieve en duidelijke gebruikersinterfaces voor zowel kleine als grote applicaties. Bekijk het portfolio van Eryk, bekijk het geweldige werk van Mobo Studio en volg @mobostudio op Twitter.
Accentsconagua