Úvahy o designu mobilních aplikací pro webové designéry
Všude, kde se obracíte, lidé dnes mluví o mobilních aplikacích . Aplikace pro toto, aplikace pro to.
Také statistiky byly trochu ohromující. Jedna nedávná studie od Chvění, ukázala, že spotřebitelé strávili 81 minut denně pomocí mobilních aplikací v porovnání se 74 minutami surfování po webu.
Vzhledem k tomu, že více lidí začíná trávit čas na aplikacích v porovnání s internetem, možná se zajímáte, jestli je návrh mobilních aplikací oblastí, které byste měli začít zkoumat, a jak přenositelné jsou vaše schopnosti v oblasti webového designu.
V tomto příspěvku jsme se zkontrolovali s řadou odborníků v oboru, abychom získali jejich perspektivy. Připojili se k nám Robin Nixon, Aaron Maxwell, Sarah Lynn, Mike Gualtieri, Josh Clark a JD Biersdorfer.
Robin Nixon
Robin Nixon je technický autor a vývojář webu a je autorem nové knihy HTML5 pro iOS a Android: Průvodce pro začátečníky .
Jaké rady byste dali webovým designérům, kteří přemýšlejí o vstupu do oblasti návrhu a vývoje mobilních aplikací?
Podle mého názoru nejrychlejším způsobem, jak se dostat do vývoje aplikací, je zajistit, abyste byli up-to-date s nejnovějšími HTML (verze 5) a CSS (verze 3) standardy, a jsou co možná nejlépe s JavaScript, protože docela brzy je pravděpodobné, že budou existovat řešení pro psaní jedné webové aplikace, která může být přeměněna na nativní aplikace pro všechny iOS, Android, Web OS, Windows Phone a další. To vám ušetří z toho, abyste se museli naučit několik složitých jazyků a vývojových prostředí, jako je Java, Objective C, .NET a tak dále a čas potřebný pro přenesení projektu do několika různých zařízení.
Například s pevným uzemněním v jazycích HTML, CSS a JavaScript můžete snadno sestavit skvělé webové aplikace, které se také mohou proměnit v samostatné aplikace pomocí informací v knize HTML5 pro iOS a Android nebo existují produkty dostupné na internetu pomoci zjednodušit proces.
S tím, že společnost Microsoft nyní uvádí, že aplikace v systému Windows 8 budou vytvořeny ve formátu HTML a JavaScript, je ještě více důvodů, abyste zajistili, že budete mít silné znalosti o těchto technologiích, a to zejména proto, že společnost Microsoft je známou cestou k koncepci jednoho uživatelského rozhraní do roku 2015 ten, který se nyní nachází v systému Windows Phone 7 - a zejména jeho nadcházející aktualizace Mango).
Jak přenositelné jsou webové dovednosti?
Webové dovednosti jsou vysoce přenosné k vývoji aplikací, pokud pro jejich budování využíváte tři technologie HTML, CSS a JavaScript. Pokud však plánujete natočit trasu a napsat své aplikace v Cíle C (pro iOS) nebo Java (pro Android), potřebujete více programovacího zázemí než webový vývoj a pro každou z nich je poměrně strmá křivka učení .
Naštěstí pro většinu aplikací je možné používat webové technologie pro dosažení podobných výsledků jako psaní nativního kódu. Pouze pokud se dostanete k funkcím důležitým pro čas, jako jsou požadavky na vysoké frekvence rychlých akčních her, musíte se vrátit do rodného jazyka zařízení nebo operačního systému.
Jaké aplikace podle vás jsou dle vašeho názoru dobrými příklady dobře navržené aplikace?
Nemám rád zmínku o konkrétních aplikacích, které představují dobrý design, protože existuje tolik z nich, ale protože jste se na to zeptali, nepochybně vynikající aplikací je Theodore Gray Elementy , což je interaktivní 3D průzkum všech prvků, ve kterých si můžete téměř představit, že se jich dotýkáte, protože můžete každý vzorek otáčet, pohybovat se špičkami prstů a dokonce je prohlížet ve 3D. Pro mě je to příklad toho, kde elektronická kniha (což je to, čím se skutečně nachází) se stává mnohem více než jednoduchá kniha pro překlad elektronických knih (což je většina ostatních elektronických knih), přičemž knihy se dostanou na zcela novou úroveň.
Elementy
Jak vidíte tentokrát v designu webových stránek?
Robin Nixon: Věřím, že právě teď je nejvíce vzrušující doba pro programátory a vývojáře od počátku 80. let, kdy mikropočítače poprvé rozkvetly. Jakmile počítač získal počítačový trůn, nabízeli pouze operační systém Mac a operační systém Linux nějakou skutečnou soutěž (a vzácné). Ale nyní jsou války operačního systému opět zapnuté, tentokrát poháněné exponenciálním převzetím mobilních zařízení, jako jsou telefony a tablety, a fenomenálním stažením aplikací pro ně, což znamená, že existuje tam svět příležitostí. Podle mého názoru: "V jejich kopcích je zlato."
Aaron Maxwell
Aaron Maxwell je zakladatelem Mobile Web Up, a mobilní návrh webových stránek agentura.
Co by měli weboví návrháři přemýšlet, když se pustili do oblasti webových aplikací?
Mnoho stejných pojmů stále platí. Jako návrhář si přemýšlejte o tom, jaké akce chcete mít uživatel schopen vzít - jaké zkušenosti byste měli mít možnost mít. Toto zaměření je často nejlepším místem k zahájení.
Nabídky jsou nejefektivnější, pokud nepřebírají příliš mnoho možností. Uspořádejte se do hierarchické, vrtné struktury, která má na každé úrovni více než tucet možností. Zvažte, zda pomocí navigačního panelu na kartách uživatel pomůže rychle podniknout různé akce, které potřebují.
Rozteč prvků je na mobilním zařízení obtížný. Extra polstrování je velmi užitečná technika na ploše pro sémantické seskupování; můžete umístit skupinu widgetů, obrázků nebo textových polí dohromady, které jsou příbuzné, a odlišit je od jiné skupiny jen oddělením vertikálního a horizontálního prostoru.
Ale na mobilní obrazovce máte jen tolik nemovitostí, s nimiž můžete pracovat. Takže návrhář musí být ekonomičtější s tím, jak jsou prvky prostorově odděleny, padací s pouhými několika pixely spíše než desítkami. To může fungovat i tím, že do něj budou zařazeny další signály. Zaoblené rohy kolem obvodu znamenají sdružování. A různé barvy pozadí mohou také sdělovat změnu kontextu.
Co vynecháte, je přinejmenším stejně důležité jako to, co jste vložili. Přemýšlejte takto: každá položka, kterou přidáte do nabídky nastavení, má například náklady spojené s přidanou složitostí, časem a pozorností uživatele. Pečlivě zvážíte, zda nějaký prvek nebo prvek stojí za to, zvláště s ohledem na druh prostředí s velkým rozptylem, které se mobilní aplikace obvykle používají.
Jaké aplikace jsou podle vašeho názoru příkladem dobrého designu?
Je důležité studovat další velmi úspěšné mobilní aplikace, abyste zjistili, co je efektivní. Podívejte se na slavné jména: Facebook, Skype, bez ohledu na to, jaký Twitter klient je tento týden nejoblíbenější. Zeptejte se přátel a rodiny, které aplikace nejvíce využívají, a snažte se zjistit, proč. (Tip: nemusí vědomě vědět proč, takže se je přímo ptát nebude moc.) Studie Mobile UI Patterns.
Sarah Lynnová
Sarah Lynnová je web designer a tvůrčí a majitelka Sarah Lynn Design.
Jak navrhujete, aby se návrháři mohli věnovat studiu vývoje mobilních aplikací?
Našel jsem některé z nejlepších způsobů, jak se naučit, jak navrhnout pro aplikace je zkoumáním trhu. Podívejte se na některé aplikace, které analyzují jejich funkčnost, jaké prvky využívají, které jsou již součástí nabídek telefonu a jak mohou být zlepšeny, aby byly snadněji použitelné. Studovat interakce různých prvků a vzájemné porovnání různých aplikací. Mnoho společností již dalo čas provést rozsáhlé testování uživatelů. Naučte se od toho, co již vyvinuli, a najděte způsoby, jak na ně navázat a učinit z nich lepší.
Existuje mnoho skvělých knih, které vám pomohou začít. Jedna jsem velmi doporučuji je kniha Suzanne Ginsburg titulovaný Navrhování uživatelských zkušeností s iPhone . Pokud vás samozřejmě zajímá iOS trh. Hovoří o testování uživatelů a o tom, jak plánovat návrh aplikace. Skvělé místo, kde můžete začít, když si nejste jisti, jak postupovat při navrhování aplikace.
Naučte se, jak získat zpětnou vazbu od uživatelů a silně naplánovat práci na papíře před tím, než půjdete do počítače, je skvělá dovednost pro každého návrháře aplikací (nebo interaktivního návrháře obecně). Další skvělý způsob, jak se naučit, je dostat se do kontaktu s designérem aplikací, který již vytváří skvělou práci. Požádejte je, aby byli mentorem a poskytli vám nějaké ukazatele, které jsou ochotny nabídnout. Většina návrhářů je ochotna strávit pár okamžiků svého času, když se pěkně ptali. Získejte zpětnou vazbu od svých přátel a dalších návrhářů, které možná víte. Ukažte jim prototypy a získávejte zpětnou vazbu.
Jakým způsobem lze podle vašeho názoru přenášet dovednosti pro návrh webových aplikací?
Poněkud přenosný. Řekl bych, že to spadá spíše do oblasti interaktivního designu jako celku. Což zahrnuje obojí.
Existuje však mnoho různých věcí, které je třeba zvážit vzhledem k velikosti zařízení, požadavkům na různé platformy a jednoduše proto, že uživatelé komunikují s aplikacemi ve srovnání s webovými stránkami. Uživatelské profily pro mobilní zařízení se mohou lišit od běžného mobilního uživatele na mobilním uživateli, který je prostě příliš líný, aby si uchopil svůj laptop a používal své aplikace, když visel po celém domě. vzory a navrhování tak, aby vyhovovaly různému životnímu stylu, mohou být v jistém smyslu podobné při navrhování webové stránky. Bez ohledu na to, jaké médium jste vždy chtěli navrhnout kolem vašeho cílového publika.
Naučit se přemýšlet v menším a často méně flexibilním formátu může být náročné. Totéž platí o přemýšlení o krajině versus vertikální a o tom, jak by mohla aplikace přizpůsobit oběma způsobům. Využití vestavěných nástrojů mobilního zařízení je dalším důvodem, proč výzkum je tak důležitý, pokud jde o návrh aplikací. Je skoro nejlepší vybrat si jednu platformu a naučit se její příčiny, spíše než se snažit je všechny naučit. Může to být naprosto skličující a ohromující, pokud se o to všechno najednou naučíte.
Stejně jako jakékoliv nové médium, vyžaduje si ochotu učit se a udržet si aktuální informace o rychle se rozvíjejícím trhu, aby byl úspěšný.
Mike Gualtieri
Mike Gualtieri, je hlavním analytikem společnosti Forrester Research a autorem nové zprávy, Osvědčené postupy pro návrh aplikací pro mobilní aplikace .
Co musí designer aplikací věnovat zvláštní pozornost při navrhování dobré uživatelské zkušenosti?
Očekávání uživatelů jsou pro mobilní aplikace vyšší než pro webové stránky. Aplikace Apple iPhone přinesla do mobilních aplikací designový obal. Funkce dotyku a gesta poskytují také nové způsoby interakce s aplikacemi. Prvním krokem k vytvoření skvělých aplikací je pochopit uživatele lépe, než se sami rozumí. Tradiční kvantitativní a kvalitativní výzkum je důležitý pro vytváření osobností (fiktivních lidí, kteří zastupují vaše uživatele). Skvělý design pochází z představivosti - návrhář si představil, co by uživatel považoval za užitečné, využitelné a žádoucí v kontextu aplikace.
Zvláště u mobilních aplikací by návrháři měli vzít v úvahu pět dimenzí kontextu mobilního návrhu: umístění, pohyb, bezprostřednost, intimitu a zařízení.
Zdroj: Forrester Research, Inc.
Jakou radu byste webovým návrhářům přemýšleli o pohybu v tomto směru?
Udělej to. Návrh mobilních aplikací pro smartphony a tablety představuje rostoucí příležitost. Každý potřebuje skvělý design. Existují tři cesty k vývoji mobilních aplikací:
- Nativní aplikace. Pokud máte schopnosti JavaScriptu, pak máte nějaké programovací schopnosti. Nenechte se zastrašit Cílem C pro iPhone nebo Java pro Android. Přejděte knihou na jednu z nich a budete mít možnost získat rychlý nápad, pokud je to něco, co můžete řešit. Ne všichni weboví návrháři budou moci bez dalšího školení.
- HTML5. Aplikace
- Hybridní. Je nativní aplikace, která HTML5 uvnitř vytváří.
Všechny tyto vývojové cesty vyžadují design.
Josh Clark
Josh Clark je návrhář, vývojář a autor Tapworthy: Navrhování skvělých iPhone Apps a Nejlepší iPhone Apps: Průvodce pro diskriminaci downloaderů .
Jakou radu byste dali webovým návrhářům, kteří mají zájem se stěhovat do návrhu a vývoje aplikací? Co potřebují, aby se učil?
Pokud jde o skutečné konstrukční technologie, nemusí se ani učit víc. Můžete vytvářet nějaké mohutné působivé rozhraní pomocí našich osvědčených přátel HTML, CSS a JavaScript. Nemluvím jen o tradičních webových aplikacích, ale také o tzv. "Hybridních aplikacích". Jde o aplikace, jejichž rozhraní jsou navržena s HTML, ale jsou dodávána jako nativní aplikace do různých obchodů s aplikacemi. Je to jako distribuce webové aplikace prostřednictvím obchodu s aplikacemi. Pro webových designérů je to přístupný způsob, jak začít pracovat s vytvářením webových aplikací bez toho, aby se učil programovací jazyk.
Jonathan Stark napsal dvě skvělé knihy, které vám poskytnou přehled o tom, jak to udělat, pomocí open-source projektu nazvaného PhoneGap, který svá webová aplikace propojí do svého prohlížeče jako nativní aplikace: Budování iPhone Apps s HTML, CSS a JavaScript a Budování aplikací pro Android s HTML, CSS a JavaScript .
Tady je věc: Zatímco můžete dělat zajímavé věci s HTML5 a CSS3, tyto technologie prostě nemohou zcela odpovídat polským a pizazským aplikacím Real McCoy, software postavený s rodným jazykem zařízení. Chcete-li vytvářet aplikace s okouzlující grafikou, animacemi, nativními widgety a plným přístupem k celému zařízení, je lepší, abyste se přihlásili. To znamená, že je třeba kódovat aplikace iPhone v Objective-C, aplikace pro Android v Javě a tak dále. Jedná se o programovací jazyky, které neumožňují manipulaci, a mohou představovat prudké stoupání pro webových designérů. Pokud jedete na tuto trasu, možná budete chtít spolupracovat s více zkušenými kodéry, které vám pomohou oživit vaše návrhy. Mezitím však experimentování s navrhováním aplikací s HTML, CSS a Javascriptem může být skvělý způsob, jak se seznámit s platformou a dokonce vytvořit rychlé prototypy pro nativní aplikace.
Co se týče samotného procesu návrhu, navrhování mobilních zážitků se liší od designu stolního počítače. Dvěma novinkami jsou ergonomie a kontext.
U zařízení s dotykovým displejem máte poctivé ergonomické problémy, s nimiž se můžete potýkat. Navrhujete rozhraní pro prsty a palce, a to znamená, že musíte zvážit problémy komfortu, kdy váš palec přirozeně přichází k odpočinku na obrazovce? Kromě toho existují problémy s viditelností. Když pracujete s rozhraním ručně, zjistíte, že obrazovku zjevně zatemňujete. To znamená, že musíte navrhnout ovládací prvky tak, aby nenarušovaly obsah. Oba tyto úvahy - pohodlí a viditelnost - vysvětlují, proč většina smartphonů s dotykovým displejem zobrazuje hlavní ovládání a navigaci v dolní části obrazovky. To je místo, kde váš palec přichází k odpočinku při použití telefonu s jedním rukama, a to také znamená, že můžete ovládat ovládací prvky, aniž by se dostal do cesty obsahu. To je přesně naopak toho, co jsme zvyklí na ploše, kde se primární nabídky a ovládací prvky dostanou do horní části obrazovky.
Další oblastí, která je nová, která je třeba zvážit, je kontext. Jak a kde budou lidé tuto aplikaci používat? Jak to ovlivní jejich priority a funkce, které byste měli položit přední a střední? Musíte být opatrní. Mýtus se vyvíjel tak, že existuje jen jeden druh mobilního uživatele: spěchal, ve spěchu, rozptýlený. To je jistě někdy, ale ne celou dobu. Mobile není jen na cestách: je na gauči, v kuchyni a čeká na letišti za zpožděný let. Všechny tyto situace jsou okamžiky, kdy má vaše publikum spoustu pozornosti a může s vaší aplikací skutečně trávit čas. Současně mohou mobilní zařízení dělat více než stolní počítače, protože jsou nabité všemi těmito senzory, které jim efektivně dávají superpower: GPS, mikrofon, fotoaparát, dotykový, gyroskop, kompas. Tento kontext zařízení vystihuje, jak vaše publikum používá svůj telefon a očekává, že bude používat vaši aplikaci.
To vše znamená, že musíte zvážit, jak kontext zařízení ovlivňuje priority uživatelů a zda se tyto priority pravděpodobně liší od priorit stolních počítačů. K tomu však dochází k ostrému zákroku: tento kontext nemůžete zaměňovat záměrem uživatele. Existuje obyčejný instinkt, který by zjednodušil mobilní aplikace, aby se stal "desktop lite lite". To je špatně. V těchto dnech děláme všechno na našich telefonech a pokaždé, když říkáte: "Lidé nechtějí dělat to na mobilu", mýlíte se. My jsme všichni měli tu zkušenost, kam chodíte na webovou stránku vašeho smartphonu, a narazíte na mobilní verzi webu, kde jste právě vynechali požadovanou funkci nebo obsah. Jen proto, že jste na malé obrazovce zřídka znamená, že chcete dělat méně. Je to jako říkat, že právě proto, že kniha s knihami je menší, měli bychom odstranit kapitoly. Nezaměňujte obsah zařízení záměrem.
Říkám, že jsem přesvědčen, že ve většině případů by mobilní aplikace a webové stránky měly tematicky podobný obsah a funkce pro své bratranky. Prezentace a priorita se mohou velmi lišit, aby vyhovovaly mobilním myšlenkám, ale obsah by měl být téměř vždy stejný. Ve skutečnosti by mobilní verze měla v mnoha případech dělat více, protože zařízení je schopna více. To je důvod, proč Amazonova mobilní aplikace může dělat věci, které web nemůže dělat: skenování čárových kódů, například pro vyhledávání položek.
Pro webových designérů to znamená, že musíte začít pružněji přemýšlet o tom, jak budovat webové stránky. Děláme to špatně již více než 15 let, budování webových stránek pouze pro prohlížení desktopů. To není to, na čem byl web určen. Byla navržena tak, aby byla platforma neutrální a zobrazovala se na jakémkoli displeji nebo zařízení. Prostě nevíte, jak bude vaše webové stránky nyní zobrazeny. Existují jillion zařízení s různými tvůrčími faktory, které mají nyní přístup k vašim webům, což znamená, že je důležité vytvořit webové stránky, které se mohou přizpůsobit jakémukoli zařízení. Pro většinu z nás je to nový způsob, jak přemýšlet o budování webových stránek - není to záležitost generování samostatných mobilních webových stránek a samostatných webových stránek pro stolní počítače. Místo toho to znamená vybudovat jediný web, který se laskavě přizpůsobí omezením a schopnostem každého zařízení.
Máme tu velkou štěstí na planetě Zemi, že žijeme spolu s nejchytřejším člověkem ve vesmíru o tom, jak navrhnout tento druh citlivého webu a jeho jméno je Ethan Marcotte. Ethan právě napsal skvělou novou knihu nazvanou Odpovídající webový design který popisuje, jak jít o vytváření stránek, které přizpůsobují jejich design a funkce pro jakékoliv zařízení. Je to génius a vy můžete být geniální také čtením jeho knihy. Tato věc je stejně důležitá pro zdraví a budoucnost našeho řemesla jako kampaň webových standardů za poslední desetiletí. Každý webový designér by měl odložit pár hodin, aby tuto knihu zaklepal.
JD Biersdorfer
JD Biersdorfer je technologický novinář a autor několika knih o gadgets včetně Nejlepší iPhone Apps .
Podle vašeho názoru, co dělá pro dobře navržené aplikace a dobré uživatelské zkušenosti?
Poté, co jsem se podíval na 400-500 aplikací pro knihu Nejlepší iPhone Apps, myslím, že aplikace, které fungují nejlépe, jsou ty, kde uživatelské rozhraní bylo speciálně navrženo pro obrazovku malého telefonu, a nikoliv aplikace, které používají desktopový přístup ikony a nabídky) a snažte se příliš zaplnit do prostoru. Dobrá aplikace je také stabilní a dobře testovaná a poměrně bezrážející.
Existují nějaké konkrétní aplikace, které vám pomohou být dobrými příklady designu?
Přestože jsem jej v té době nezahrnula do knihy, protože jsem zjistil, že je přeplněná a havárie, "AccuWeather" přepracovala svůj iPhone app na skutečně nádherný program počasí s velkou barevnou grafikou a poměrně intuitivním rozhraním, takže nemusíte muset kopat kolem několika obrazovek, aby zjistil, jak je to horko - a jak horké to bude. Volné a placené aplikace se v návrhu lehce liší, ale oba používají stejné vizuální prvky, které rychle přenášejí povětrnostní podmínky.
AccuWeather
Také se mi líbí aplikace "Kayak" pro věci, které vývojáři do něj vložili kromě obvyklé části rezervací letu a hotelu. Například je zde část, kterou můžete klepnout, abyste zjistili, kolik si každá letecká společnost účtuje, abyste zkontrolovali tašky, jiný, abyste zjistili, jaké obchody a restaurace jsou na letišti, na kterém jste přilepená, měnový konvertor a dokonce i kontrolní seznam pro balení to je dobře zaoblená praktická aplikace pro cestování, která je snadná pro navigaci.
Zprávy, stále si myslím, že aplikace "BBC News" je skvělá pro nadcházející psy. Tvůrci aplikace dokáží najít čitelnou cestu k devět nejlepších příběhů (s titulky a malými obrázky) na domovské obrazovce spolu s bannerem Breaking News a klepnutím na tlačítko, abyste mohli slyšet živé vysílání BBC Radio. Je velmi snadné upravit kategorie zpráv, které chcete sledovat, a odkazy na oblíbené předem nahrané videoklipy a zvukové klipy, které můžete streamovat, například krátké video World News Summary.
Tento příspěvek vám přinesl offset tisk brožur společnost, Flyers následujícího dne.
Jaké jsou vaše zkušenosti s návrhem mobilní aplikace? Jaké aplikace si myslíte, že prokazují dobré principy návrhu a uživatelské rozhraní? Dejte nám vědět v níže uvedených komentářích.