Daniel Hruška Že by aplikace měly po vzhledové stránce vypadat k světu, musí být všem vývojářům bez pochyb zřejmé. Tedy pokud mají opravdu vysoké cíle a míří do top žebříčků v App Store. Hezký kabátek dokáží uživatelé ocenit, protože se jim bude aplikace lépe používat. Nejčastější příčinou, proč i aplikace s dobrou funkcionalitou neuspějí, je právě otřesný vzhled. Ovšem ještě než vůbec nějakou aplikaci spustíte, uvidíte nejprve její ikonu. Její vzhled je tudíž neméně důležitý jako uživatelské prostředí aplikace samotné.
Abychom pochopili důležitost ikon, je potřeba si uvědomit jejich účel. V první řadě tvoří jeden z nástrojů marketingu, protože je potřeba nějakým způsobem přitáhnout potencionální uživatele. Zkuste si promítnout sami na sebe situaci, kdy jen tak při zabíjení času procházíte App Store. Najednou vás do oka praští opravdu hezky provedená ikona, vy si zobrazíte detaily aplikace a případně ji stáhnete. Že jste již takový moment zažili? O tom není sporu. Ikona je totiž v drtivé většině případů vůbec to první, co z aplikace uvidíte, a proto je její vzhled kriticky důležitý.
Jakmile se aplikace usídlí na vaší ploše, mění se také účel její ikony. Měla by se od ostatních ikon odlišovat takovým způsobem, aby vypadala naprosto jedinečně a uživatel ji nemohl zaměnit s jinými ikonami. Protože aplikaci stáhneme vždy pouze jen jednou, ale používáme denně, je tento účel ikony ještě důležitější než marketing. Měli bychom být schopni ji ve zlomku vteřiny bez jakéhokoli zaváhání rozeznat od ostatních.
Ideální ikona připomíná uživateli aplikaci díky tvaru, barvě, textuře nebo nějakému předmětu. Jako příklad si vezměme třeba aplikaci Telefon. Ta se od roku 2007, kdy ji Steve Jobs poprvé ukázal s první generací iPhonu, změnila jen lehce. Základ tvoří výrazně zelený podklad proložený diagonálními pruhy. Úplně nahoře (ve svrchní vrstvě) je pak umístěn symbol sluchátka telefonu. Spojíte-li tyto tři jednoduché prvky do jediného celku, vznikne ikona naprosto odlišná od všech ostatních. Chcete-li posléze někomu zavolat, automaticky a bez přemýšlení klepnete právě na ni.
Pokud se podíváme na ikony dalších nativních aplikací, které my jako uživatelé iOS velmi dobře známe, najdeme podobné charakteristiky. Ikonu Mailu tvoří blankytně modrá obloha s oblaky a jednoduchou obálkou uprostřed. O účelu aplikace jistě není možné zapochybovat. Ikoně Hudby zase dodává tvář sytě oranžová barva s jemnou texturou a osminovou notou. Oranžová barva má svou historii v aplikaci iPod, která se od iOS 5 rozštěpila na Hudbu a Videa.
Když se zkusíme zaměřit na proces návrhu a vytváření ikon, každý snadno přijde se zřejmými nápady, které by vystihovaly účel aplikace. Jako názorný příklad si vezměme aplikace sloužící k nakupování. Na většině z nich je umístěn velký nákupní košík a jen malou část využitelné plochy pak zabírá logo společnosti. Nemělo by tomu být přesně naopak? A co kdybychom košík odstranili úplně?
Zamyslíme-li se na celou problematikou více do hloubky, zjistíme, že použití košíku je naprosto nelogickým krokem. V internetových obchodech jsme přeci nikdy nepokládali zboží do drátěných vozíků s kolečky. Namísto nesmyslných metafor by se grafici těchto ikon měli zaměřit na značku, která tvoří symbol společnosti. Je až s podivem, že si toto neuvědomil ani Apple. Vždyť jeho síť Apple Storů patří k architektonickým skvostům. Co kdyby ikona obsahovala mdle svíticí logo nakousnutého jablka na ocelově šedém podkladu? Ostatně, porovnejte sami.
Podobný přístup lze aplikovat i na ostatní ikony. Grafické prostředí aplikace lze poměrně jednoduchým způsobem převést na ikonu. Find My Friends jsou velmi dobrým příkladem. Jejich textura alias prošívaná kůže byla mnoha lidmi (i námi) kritizována, avšak v této záležitosi přijde vhod – „obšitou“ ikonu si ihned spojíte s Find My Friends. Ikona Map stejně jako iBooks taktéž navazuje na vzhled aplikace.
Dalším způsobem, jakým vytvořit ikonu, je vzít si příklad ze skutečného objektu. Teď však nemyslím nákupní košík, ale předmět, který daná aplikace skutečně nahrazuje. Pokud se vám taková transformace povede a propojíte skutečnou věc s ikonou aplikace, šance na úspěšný start v App Store se pochopitelně zvýší.
Routesy je aplikace s jízdními řády v oblasti kolem San Francisca, tzv. Bay Area. Ikona výrazně převzala vzhled starých měsíčních autobusových jízdenek. I když se v dnešní době nepoužívají, každý občan z této oblasti je neomylně pozná. Použití lístku jako ikony je velice prozíravé. Stejně jako jste kdysi v ruce drželi lístek na autobus, vidíte jej nyní jako ikonu ve vašem iPhonu.
Delivery Status zase slouží ke sledování zásilek. Ty jsou téměř vždy zasílány v béžových krabicích s velkým bílým lístkem na některé ze šesti stran. Vezměte tuto stranu, udělejte z ní ikonu a máte hotovo. „Kde je můj balík?“ Klepněte na balík na vašem displeji a dozvíte se odpověď.
A pak zde máme aplikaci Trailer z dílen Applu, která bohužel není dostupná v českém App Store. Chytře využívá symbol kamery z hollywoodského chodníku slavných na červeném podkladu symbolizující červený koberec. Víc výstižněji aplikaci na ukázky filmových trháků reprezentovat nejde.
Nezřídka se stává, že aplikace pro OS X mají své protějšky také na iOS. Představme si několik příkladů, kdy se grafikům podařilo vizuálně sjednotit ikony na obou platformách. Coda a Diet Coda sdílejí list, barvu a texturu. Things znázorňují štos papírů v přihrádce, jen pod jiným úhlem. Symbolem Twitterificu je modrý mávající ptáček, který byl kvůli čtvercovému tvaru ikon v iOS chytře ořezán. Zajímavější situace nastává, kdy jedna společnost vyvinula více aplikací.
Nike+ má několik aplikací s ikonami podle podobné šablony. Všechny tři jsou osvětleny diagonálně, vespod je umístěna podlaha a uprostřed samozřejmě nechybí notoricky známá fajfka. Díky těmto prvkům vypadají ikony velmi podobně, avšak zároveň si ani jednu nespletete s jinou.
Facebook má také několik aplikací, také se podobají jako vejce vejci a také je navzájem ani omylem nezaměníte. Ikony sdílejí typickou „facebookovskou“ modrou barvu se světlejším pruhem v dolní části, který je opticky pojí dohromady. Odlišné jsou jen objekty uprostřed ikon.
Balíček iLife sdílí něco velmi zajímavého a unikátního – prostředí. I když jsou jednotlivá místa navržena zcela jinak, vždy je na nich objekt stojící na podlaze v těsné blízkosti k pozadí. Tohoto pojítka si zřejmě všimnete až v okamžiku, kdy si seřadíte všechny ikony vedle sebe.
Aplikace z iWork se vyznačují naprosto totožným pozadím, modrým přechodem a odleskem shora. Dalšími nenápadnými pojítky jsou objekty samotné. Keynote a Pages obsahují lesklé předměty, Keynote a Numbers zase grafy. Navíc iWork známe již dlouhá léta z OS X, tudíž nejsou jejich ikony nikterak cizí.
Ikonu pro aplikaci lze vytvořit mnoha způsoby – ať už vypůjčením skutečných věcí, nebo vlastní fantazií. U her je situace značně odlišná. Rychlým průzkumem lze zjistit, že mnoho vývojářů jednoduše vezme hlavního hrdinu nebo věc a vloží ho do žlutého rámečku. Právě žlutý rámeček se stává jakýmsi rychlým poznávacím znamením pro hry.
Naprosto souhlasím. Skoro pořád kupuji či stahuji jen díky hezké ikoně :)
Co je to za aplikaci uprostřed z těch facebookových? Díky :)
Facebook Camera.
https://itunes.apple.com/cz/app/facebook-camera/id525898024?mt=8
děkuji
„Zamyslíme-li se na celou problematikou více do hloubky, zjistíme, že použití košíku je naprosto nelogickým krokem.“
Nebudem sa priet, nie som odbornik v tejto oblasti. Ale ja osobne by som proti tomu kosiku tak nenamietal. V internetovom obchode nenakupujeme do kosiku, ale v realnom svete ano a je to dost silna väzba/asociacia. Ked vidim takuto ikonu, tak mi je hned na prvy pohlad jasne, ze to bude aplikacia, pomocou ktorej budem nieco nakupovat. Ale ked vidim aplikaciu, kde je velke „a“, tak mi to uz take jasne nie je. Skratka je to len amazon. Samozrejme, co by som uz ine na amazone mohol robit, ze? Ale stale to moze byt napriklad prezeranie, vytvorenie wish listu.. Pokial teda viem, ze sa jedna o amazon. Ten je znamy, ale ine nemusia byt. Skratka ta asociacia sa u mna hned nevytvori. V iBooks (ktore boli uvadzane ako dobry priklad) tiez necitam realnu knihu, ale len text.
Ikony bez košíků sice vypadají lip ale kdo nezná konkrétní firmy tak z nich apsolutně nepochopí že jde o nakupování. Mě by třeba nenapadlo klikat na tu první protože mi to nic neříká.
Dajme na auta logo auta, aby nam bolo jasne, ze je to auto :-)
Pěkný článek a naprostý souhlas. Už kolikrát jsem si aplikaci stáhnul „jen“ díky ikoně. :) Jenom v případě toho Zappos, Amazonu a Apple Storu úplně nesouhlasím, protože zrovna v těchto případech mi ten košík opravdu dává smysl a bez toho košíku bych si vůbec nedokázal představit o co jde.. Hlavně „za“ logem Applu na ikonce vůbec nevím, co bych měl čekat..
Téměř všechny ikony mi přijdou neskutečně infantilní, asi jako na dvířka skříněk v mateřské školce.
Autorovi vadi skeumorphismus u nakupniho kosiku navzdory tomu, ze snad vsechny eshopy vyuzivaji rtualnich kosiku. Na druhou stranu se mu ale libi to same u sluchatka, kde lze argumentovat treba tim, ze nova generace uz takove sluchatko ani nedrzela v ruce.
Podle meho nazoru se nelze na veci divat selektivne, bud prijmu skeumorphismus jako jakesi piktogramy, znacky zlepsujici vizualni orientaci a nebo je zavrhnu, pak ale by melo prostredi pouzivat spise slova, misto telefonu dlazdice se slovem „call“ „message“ pro sms/mms. atd..
Od toho ale upustili vyrobci telefonu uz koncem 90. let, kdy do menu zacali pridavat obrazove zkratky. Podle me je skeumorphismus v poradku, ale vse ma svou hranici, falesna obsivka ve Find my friends a podobne hruzy, to uz je za carou.
To by som chcel vidiet navrhy ikon od autora tohoto nezmyselneho clanku.
To by videl tie komentare, ludia by ho ukamenovali, pretoze by potrebovali manual na ikony, lebo nikto by nevedel co dana ikona znamena.
Ikona ma byt obrazkova forma funkcie ktoru spusta. A neviem si predstavit inu asociaciu pre nakup, ako nakupny kosik v aplikacii pre nakupovanie a logo firmy.
Autor clanku, zamysli sa trochu nad tym co pises, a az tak to napis, lebo toto je cisty blud.