Jak revoluce dotykové obrazovky ovlivňuje UX
Zavedení systému Windows 8 vedlo k masivnímu přepracování uživatelského rozhraní Windows v souladu s rozhraním Windows Phone, aby bylo pro uživatele s dotykovými obrazovkami intuitivnější a společnost Apple v průběhu času jemně přizpůsobovala OSX a zefektivnila funkce, které se stále častěji rozšiřují přes jejich mobilní a stolní operační systémy. Zatímco jsme zatím viděli Mac s dotykovým displejem, je zřejmé, že revoluce na dotykové obrazovce se na nás stala s tím, že uživatelé tráví více a více času na svých mobilních zařízeních než domácí počítače.
S ohledem na tuto skutečnost a neustále rostoucí část procházení probíhající na smartphonech a tabletech se musí webové stránky rozhodnout, jak se budou přizpůsobovat osobám, které přistupují k jejich obsahu bez myši a klávesnice. Zatímco výchozí odpověď na tuto otázku byla často "stačí vytvořit samostatné mobilní rozhraní!", Což je řešení, které v minulosti fungovalo v malých mobilních zařízeních, jako jsou telefony, je zde jen velmi málo prostoru pro střední skupinu obsazenou větším telefonem a tablety.
Tento článek se bude zabývat řadou webů, které sundaly jak netradiční, tak standardní návrhy stránek, aby se staly více dotykovými.
Soustředěné webové stránky a citlivé webové stránky
Mnoho webových stránek vytvořilo podpůrné weby nebo aplikace speciálně pro uživatele dotykové obrazovky, které jim umožňují soustředit se na jeden typ uživatele najednou. Jeden problém je, že vzhledem k tomu, že webové stránky jsou oddělené, spoléhají na přesměrování adres URL, které může často vést k problémům, jako je například odesílání uživatele z nesprávného webu z odkazů nebo špatné přesměrování v důsledku nutnosti přesměrování na formátované stránky pro mobilní uživatele.
Největším problémem s oddělenými webovými stránkami pro mobilní uživatele je však to, že mobilní verze často neobsahuje funkce nebo informace, které uživatel desktopu obdrží; funkce a rozhraní jsou často zjednodušené, tlačítka jsou zvětšená a možnosti jsou sníženy. To je možné vyřešit pomocí designu "reagujícího". Odpovědná webová stránka je navržena tak, aby mohla být snadno viditelná na obou platformách, aniž by došlo ke ztrátě kvality v obou platformách. To má také tu výhodu, že je třeba navrhnout pouze jednu webovou stránku, spíše než dvě, což však často vede k kompromisům pro obě platformy.
Základní konstrukční rozdíly
Existují zjevné rozdíly mezi dotykovým displejem a pracovní plochou, o které je třeba přemýšlet při vytváření svých webových stránek. Na dotykové obrazovce přejdete přes stránku nahoru, abyste ji posunuli dolů, na ploše však posunujete rolovací kolečko dolů. Společnost Apple se pokoušela tuto skutečnost opravit upevněním svých dotykových technologií na trackpady na počítačích s notebooky i počítači, avšak uživatelé PC nebo dokonce i uživatelé Mac používající konvenční rolovací kolečka nebo posuvníky k procházení webových stránek jsou znevýhodněni.
Tlačítka musí být mnohem větší v mobilních zařízeních, jelikož klepání je zrovna tak přesné jako klepnutí myší, není nic víc rozzuřujícího než pokusit se kliknout na odkaz na další stránku a nechtěně se poslat zpět na stránku nebo na reklamu. Nedostatek kurzoru také znamená, že nemůžete mít stavy pohybující se na zemi, aby vysvětlil, kam jde odkaz, co znamená slovo, nebo dokonce to, na co lze kliknout.
Existuje také rozdíl mezi přesností na mobilních vstupech, neboť dotykové obrazovky mohou mít buď odporové nebo kapacitní vstupy, které mají různé citlivosti a následně mohou na dotykových obrazovkách odporovat ztrátu přesnosti. Kromě toho musí návrhy obsahovat dvě velmi odlišná rozlišení pro mobilní zařízení, která mají dvě orientace.
Orientace obrazovky a poměr stran
S více rozlišeními, než je obvyklá velikost monitoru, znamená to, že již nemusíte myslet pouze na standardizovaná rozlišení obrazovky a vertikální pohyb. Rychlé změny na trhu s technologiemi vedly k tomu, že se velikost obrazovky liší od modelu a výrobce a se všemi pověstmi o tzv. Inteligentních hodinkách můžeme začít vidět obrazovky, které již nejsou omezeny na čtyři hranice. Mobilní obrazovky přinášejí další složitost vzhledem k tomu, že je lze prohlížet v režimu portrétů i na šířku.
Odpověď jsou tekuté rozvržení, které se samy přizpůsobí pro jakékoli rozlišení a mohou se přizpůsobit pro zobrazení na výšku i na šířku. Některé webové stránky používají tekuté rozvržení, které drasticky mění vzhled webových stránek, aby optimalizovaly snadné ovládání a využily plného potenciálu obrazovky na základě jeho orientace.
Zatímco myši byly speciálně navrženy s rolovacími kolečky pro snadné vertikální posouvání, mnoho uživatelů migruje na touchpady a dotykové obrazovky a od té doby, co Apple přijal inovativnější podobu dotykového posouvání, který se podobá tažení stránky spíše než rolování, je kreativnější myšlenka horizontální posouvání nemusí být mimo otázku. Většina aplikací používá jako nástroj nástroj pro horizontální posouvání a zdaleka největším úspěchem v horizontálním posouvání je záblesk, tak proč jej implementovat do svého webového rozhraní? Mnoho stránek na jedné stránce má pouze vodorovnou osu, často však musí používat tlačítka pro vyvolání posouvání, protože uživatelé nemusí chápat nestandardní formát.
Horizontální posun může být podobný svislému posunu v konstrukčních termínech, nicméně použití obou může otevřít možnost posunu ve dvou osách, což nemusí fungovat v prohlížeči. Mnoho uživatelů se rád ukotvuje na osu, zřejmě je to obvykle osa x, která je statická, takže pokud se uživatelé ztratí na stránce, mohou se jen posunout nahoru a vrátit se zpět na hlavní navigaci. Na dvouosých místech to nemusí být tak jednoduché, a proto může být nutné, aby navigace byla lepkavá, a to pomocí lišty stylů HUD.
Jaké uživatelské rozhraní by tedy měly používat vaše webové stránky?
Je zřejmé, že ne každá uživatelská rozhraní je vhodná pro všechny typy webových stránek. Zeptejte se tedy na některé základní otázky: Kdo je vaším cílovým publikem? Co se snažíte prodat? Jaký dojem chcete dát? Mladší lidé s větší pravděpodobností používají dotykové obrazovky než starší demografické osoby, které budou pravděpodobně používat pracovní plochu, ale stále mohou potřebovat větší tlačítka a jasnější uživatelské rozhraní. Nemá smysl vytvářet nejinovativnější uživatelské rozhraní, pokud nikdo nerozumí tomu, jak ho používat, takže si vždy pamatujte, jak vytvořit uživatelské rozhraní, na které se uživatel může podívat a okamžitě vědět, jak používat.
Radiální nabídka
Radiální nabídka, označovaná také jako koláčová nabídka, je kruhová kontextová nabídka, která jako nástroj výběru používá spíše vícestranný kontext než výšku nebo šířku.
Jedná se o skvělou formu intuitivního designu, který zabraňuje ztrátě uživatelů v desítkách dílčích menu. Další výhodou je, že uživatel na dotykové obrazovce má lepší kontrolu nad normálními rozbalovacími seznamy, protože směrová kontrola je přesnější než klepání. Použití radiálních nabídek ve formulářích a na webových stránkách by mohlo dramaticky zvýšit uživatelskou zkušenost s dotykovými obrazovkami na webu a rozšířit i na nástavce, jako jsou ty, které se používají na herních konzolách. Někde radiální menu se často používají, protože umožňují snadné přenášení her na PC. Jelikož takoví uživatelé desktopu neztratí, protože i nadále platí, že radiální nabídky mohou zjednodušit dlouhé seznamy do jednoduchých kategorií, což zvyšuje snadnost používání nebo produktivitu na webových stránkách.
Radiální nabídky jsou skvělým způsobem, jak zobrazit kontextově citlivé informace. Jedním z příkladů je kliknutí na obrázek misky na jídelním místě a možnost vrátit se zpět, odkaz na recept, seznam složek nebo uložit obrázek. Musíte však být opatrní, aby vaše menu zůstávalo přístupné a jednoduché, jinak byste mohli uživatel snadno přemoci, zvláště když kombinujete symboly a slova ve stejném radiálním menu. Radiální nabídky jsou mnohem jednodušší při statickém než dynamickém způsobu, protože to může vést k obtížnosti při výběru objektů, např. Phong , v tomto případě zvláště při použití myši jako sledování kurzoru to dělá obzvláště neintuitivní.
Skeuomorfismus
Skeuomorfní design napodobuje vzhled a funkčnost každodenního objektu, aby vytvořil intuitivní uživatelské rozhraní, něco, co se nedávno vytratilo z módy, a to zejména proto, že Scott Forstall odstoupil od společnosti Apple a design plochého designu Sir Jony Ive převzal iOS a pravděpodobně OS X budoucnost. Skeuomorfismus byla velkou částí posunu Apple směrem k intuitivnějšímu designu, nedávno s tím, že Contacts on Mac jsou navrženy jako skutečný adresář, nebo kiosk a iBooks na iOS jsou skutečné knihovny. Tento návrh je takový, že zřejmějším přínosem pro uživatele dotykového rozhraní, protože s kurzorem nemluvíme se světem kolem nás.
Familiarita přispívá k intuitivnosti při použití jakéhokoli uživatelského rozhraní, což je bod skeuomorfismu, který přináší další rozměr známosti tím, že spojuje síly se skutečnými objekty, takže uživatel okamžitě ví, jak s ním komunikovat. Úspěšný skejomorfní návrh znamená, že jen tak, že se podíváte na webovou stránku, budete vědět, na co je předmět / stránku použita, a to, že kurzy myši a odkazové body jsou zastaralé.
Vytočte uživatelské rozhraní
Jedná se o kombinaci obou výše uvedených, kde celé uživatelské rozhraní vytváří jednoduchou volbu; design se podobá radiálnímu menu, ale namísto kloubového kloubu v centru, volbou odtud otočí kolečko na jediný bod výběru. To je velmi účinné v případech, jako je hudba, kde se často používají voliče pro mixování stopy a řídícího objemu. V případě síťového štítku SHSK'H používají modifikovaný typ uživatelského rozhraní k výběru, kterou skladbu chcete hrát.
Minimalistický pohyb
Minimalismus je místo, kde se webová stránka stáhne zpět na své holé základní prvky. To je skvělé pro mobilní uživatele, protože snižuje dobu načítání a využití dat a umožňuje uživateli přístup ke všem potřebným informacím v jasném rozhraní, které je snadněji použitelné pro menší rozlišení. Současný minimalismus přesahuje hranice míst odklízení na holé náležitosti a vytvořil nový styl známý jako plochý design. Toto závisí na přesvědčení, že intuice již není nezbytná v konstrukci, protože rozhraní a jejich použití se staly tak důležitou součástí života, že design může přesahovat informování uživatelů, co mají dělat, UI může být konečným nástrojem, nikoli také zdvojnásobením mentor. Plochý design je již dlouho charakterizován použitím odvážných barevných bloků, ale se zavedením iOS7, přechody převzaly své místo ve světě bezhraničního plochého designu, který vyjímá eleganci od jasmínu.
Nakonec ukončím tento článek webem, který dělá věci trochu jinak. Thibaud je kreativní vývojář, který navrhl stavitel portfolia webových stránek známý jako Pikibox. Webové stránky jsou extrémně citlivé na dotek, ale bez omezení přístupu uživatelů k desktopovým uživatelům, na menších zařízeních s dotykovým displejem je však uživatel přesměrován s mobilním rozhraním.
Jednoduchý design působí úžasně při prezentaci svého celého portfolia profesionálním způsobem a přitom si udržuje zábavný a nový vzhled, který je mimořádně intuitivní. Samozřejmě, že velká část návrhu je v rukou uživatele, protože je schopna měnit umístění navigace a upravit, jak se používá prostorově, což by někteří říkali, že nepředstavují přesně návrh volby. Verze pro stolní počítače je dodávána ve čtyřech stylech a já vás vyzývám k tomu, abyste si s nimi zahráli hru a vyvodili si vlastní závěry, zda je to prostě nerozhodná nebo nesmírně kreativní.
Jaké kompromisy jste učinili v důsledku dotykových obrazovek? Je to vznášadlo o minulosti? Dejte nám vědět v komentářích.
Doporučený snímek / náhled, dotykový obrázek přes Shutterstock.