Co je to jednoduchost? Jednoduchost je kvalita přirozeného, ​​prostého a snadno srozumitelného. Není překvapující, že jednoduchost je často prospívá v návrhu uživatelského rozhraní. Většina lidí přirozeně nelíbí složitost zařízení a softwaru. Ano, někteří lidé mají rádi, když zjistí, jak něco funguje, ale pro většinu z nás není schopnost ovládat zařízení, což vede k zbytečnému času a frustraci, a to není dobrá věc.

Pokud můžete vzít složité zařízení nebo software a nějakým způsobem uspořádat, reorganizovat a přepracovat rozhraní, aby bylo snadné používat a pochopit, pak jste na cestě k lepšímu uživatelskému zážitku .

V tomto článku budu mluvit o sedmi praktických technikách , které můžete využít při tvorbě webových stránek, aby vaše webové stránky nebo webové aplikace byly jednodušší a menší.

1. Modální okna.

Jsem si jist, že si můžete vzpomenout na dny předtím, než byly zablokovány pop-up blokátory do webových prohlížečů, když jste museli bojovat se spoustou malých oken, které se příliš často rozhodly vyskočit přes horní okraj prohlížeče, zdánlivě s jediným účelem vás obtěžovat. Nikdo se těmto vyskakovacím oknům nelíbilo a zablokovaly se technologie, které je zastavily. Ale dnes se na webu objevuje nové plemeno vyskakovacích oken na webu, které jsou mnohem čistší a pracují mnohem lépe na zamýšlený účel. Jedná se o modální okna.

Modální okna jsou jako vyskakovací okna, ale místo toho, aby se objevila v samostatném okně prohlížeče, objevují se přímo v aktuálním okně, přes horní část obsahu. Modální okna vyžadují interakci, takže obsah uvedený níže je obvykle zatemněn , což indikuje toto, stejně jako blokuje rušivý šum obsahu a posunuje vizuální zaostření na výše uvedené okno .

Tak proč byste použili modální okna a jak zjednodušují vaše rozhraní? No, pokud se podíváte na alternativu, jejich účel je mnohem jasnější. Alternativou k použití něčeho jako modálního okna je obvykle načtení nové stránky. Například některé stránky mají pro váš účet stránku nastavení. Po kliknutí na odkaz nastavení se dostanete na novou stránku. Ale co když bylo jen několik možností nastavení - je skutečně vhodné přesměrovat uživatele na novou stránku?

Ve spoustě případů lze v modálním okně zobrazit obsah, například nastavení, editační rámečky a přihlašovací formuláře. Tím uživatel uloží cestu zpět na jinou stránku . Také zjednodušuje zatížení webového serveru, protože musí řešit méně požadavků.

ActionMethod , aplikace pro správu projektů, zobrazuje modální okna v celé aplikaci. Zde je formulář pro ocenění.

2. Ovládací prvky myši.

Na misku by bylo méně předmětů, což by usnadnilo spolknutí nádobí. Pokud má vaše aplikace mnoho ovládacích prvků, budou muset uživatelé prohledat většinu z nich a zjistit, co hledají. Je pravděpodobné, že některé kontroly jsou méně důležité než jiné a některé kontroly se používají mnohem méně než jiné . Nejjednodušší věc, kterou můžete udělat, je zastrčení a skrytí těchto ovládacích prvků z výchozího pohledu.

Chytrý způsob, jak to udělat, je skrýt ovládací prvky, ale pak je ukázat, když se uživatel pohybuje nad určitými oblastmi. Jsou to ovládací prvky. Například Twitter, oblíbená aplikace pro vytváření blogů, zobrazuje informaci, o níž nedávno uvedli všichni na vašem seznamu. Každá zpráva je zapouzdřena do vlastní krabice. Existují dvě akce, které můžete provést u každé zprávy: přidat ji do oblíbených nebo odpovědět na ni.

Zobrazování oblíbených a odpovědí na všechny zprávy by vedlo k nepořádek. Pravděpodobně nebudete chtít reagovat na každou zprávu v krmivu a ještě méně pravděpodobně budete chtít přidat všechny své oblíbené položky. Takže Twitter zobrazuje pouze ovládací prvky ve správném kontextu - když umístíte ukazatel myši na zprávu. To vede k jednoduššímu rozhraní a bez ztráty funkčnosti . Existuje nebezpečí, že noví uživatelé nebudou tyto ovládací prvky zaznamenávat, pokud jsou skryty; nicméně mnoho lidí má tendenci k myši nad věcmi, na které se dívá, takže vzhledem k tomu, že jsou plochy s nadmořskou výškou dostatečně velké, je pravděpodobné, že tyto kontroly budou rychle objeveny.

Cvrlikání zobrazuje tlačítka pro přidání oblíbených a odpovědí pro každou zprávu, jakmile ji umístíte.

3. Ovládání na vyžádání.

Dalším způsobem, jak skrýt věci, je využívat Javascript a zobrazovat sadu ovládacích prvků, když uživatel klikne někam. Můžete například mít na svém webu vyhledávací pole, které umožňuje některé vlastní filtry nebo pokročilé vyhledávání. Místo toho, aby tyto možnosti byly ve výchozím nastavení zobrazeny, můžete je skrýt a zpřístupnit je pomocí tlačítka na konci vyhledávacího panelu. Kliknutím na toto tlačítko se zobrazí sada možností nebo filtrů. To znamená, že si uchováte pokročilé funkce pro uživatele, kteří je potřebují, a současně zjednodušíte rozhraní pro lidi, kteří prostě potřebují jednoduché vyhledávání.

Ne každý používá některé pokročilejší nebo specializované ovládací prvky na vašem webu. Když je skryjete, děláte rozhraní čistší a srozumitelnější, protože uživatelé mají méně prvků, které je třeba zpracovat a zjistit. Výběr toho, co skrývat a co udržet, není snadný úkol a je to vaše práce jako návrhář najít vhodnou rovnováhu.

Kontain , aplikace pro blogování, poskytuje pro své vyhledávání rozšířené filtry vyhledávání, které jsou ukryty v rozbalovací nabídce na konci vyhledávacího panelu.

4. Rozšíření formulářů.

Jsem si jistý, že jste obeznámeni s pole pro nahrávání souborů, které často vidíme ve webových formulářích. Obvykle je to malý pruh s tlačítkem procházení souborů po boku. Představte si situaci, kdy uživatel pravděpodobně nahrát několik souborů najednou. Mohli byste zobrazit několik polí nahrávání souborů, ale to není ideální, protože to bude mít nepořádek rozhraní a neexistuje způsob, jak říct, kolik polí bude uživatel potřebovat. Velkým řešením v tomto případě by bylo použití rozšiřující se formy .

Jakmile uživatel nahraje jeden soubor, zobrazí se pod ním další pole pro nahrání souboru, připravené přijmout další. Pro jiné vstupní pole můžete použít stejnou techniku. Například, možná tento formulář potřebuje spoustu e-mailových adres pro lidi, které chcete pozvat do týmu nebo nějaký jiný účel. Místo toho, abyste měli mnoho textových polí, můžete mít jednu nebo pár a poté, jak je uživatel naplní, vytvoří se pod nimi nové . Rozšíření formuláře tímto způsobem je skvělý způsob, jak šetřit místo a zjednodušit rozhraní .

Gmail zobrazuje pouze jedno pole přílohy při psaní nové zprávy. Můžete klepnout na odkaz "Připojit další soubor", abyste otevřeli více, když je potřebujete.

5. Označuje vnitřní vstupní formuláře.

Formuláře mohou být komplexní rychle. Máte textová pole, popisky, textové oblasti, drop down, zaškrtávací políčka atd. Atd. A co víc, vyplňování formulářů není obvykle velmi zábavné, takže urychlení procesu a zjednodušení formulářů z něj činí méně náročné a snadnější použití. Jednou z postupů, které můžete použít k tomu, aby byly formuláře zjednodušené, je přesunout štítky zvenku vstupních oblastí směrem dovnitř. Takže namísto zobrazování štítku vedle tohoto textového pole jej zobrazte jako předem vyplněnou hodnotu uvnitř textového pole .

Toto výrazně snižuje prostor a zmenšuje celkovou velikost formuláře. Menší věci se objeví jednodušší , takže formulář by měl vypadat jednodušeji. Možná to není možné udělat pro složitější formuláře, kde máte různé typy vstupů (zaškrtávací políčka, přepínače, drop-down), ale pokud máte několik textových polí, které stojí za to zvážit, např. přihlašovací formulář.

Nyní je zde tato metoda, která naštěstí může být řešena s důkladnější implementací. Když uživatel nejprve načte stránku, uvidí pole a bude moci číst etikety. Jakmile kliknou na pole, většina těchto formulářů úplně skryje štítek a umožní uživateli zadat jejich vstup. Ale co když uživatel předčasně klikne na pole a zapomene, co to má být psáno? Možná budete muset kliknout pryč od formuláře, aby se štítek objevil znovu (snad).

Chcete-li to řešit, namísto úplného skrytí štítku můžete ztlumit, když uživatel klepne na něj, a potom úplně skrýt, když uživatel začne psát.

MobileMe zobrazuje štítky uvnitř vstupních polí na jejich přihlašovací obrazovce a potom je dále snižuje, když vyberete pole.

6. Ikony namísto textu.

Chcete-li dosáhnout jednoduchosti návrhu rozhraní, musíte snížit a odstranit všechny zbytečné nebo zřídka používané součásti . Ty zahrnují nejen ovládací prvky, ale také věci jako textové štítky. Pokud má vaše rozhraní mnoho štítků, podívejte se na ně a zeptejte se sami sebe - jsou všechny tyto štítky nutné? Jsou většina z nich jednoduše uvedena zřejmá? Pokud štítek upozorňuje na něco, co je zřejmé z kontextu dané položky, nepotřebujete tento štítek - je to zastaralé.

Chcete-li vám ukázat příklad, přemýšlejte o příspěvcích v blogu. Pod nadpisem každého příspěvku můžete mít věci jako datum a autor. Připojení štítků před každým jako "Autor:" a "Datum:" nemusí být potřeba. Když někdo vidí jméno a datum pod nadpisem článku, je velmi pravděpodobné, že zjistí, že je to autor a to je datum. Kontext, stejně jako formát, z něhož jsou zvyklí z čtení jiných blogů, dávají vašim uživatelům všechny stopy, které potřebují, aby okamžitě pochopili význam údajů. Odstraňování těchto štítků vám poskytne čistší rozhraní .

V některých případech, kdy opuštění štítku nebude fungovat, můžete štítek nahradit ikonou. Ikona má určité výhody oproti textovému štítku. Trvá méně místa. Je snadnější se zaměřit na to, protože jeho barva a výrazný tvar přitahuje oko jednodušší než text. V některých případech může být význam přenášen stejně efektivně jako text. Pokud máte například štítek nazvaný "Tagy:", po němž následuje seznam odkazů, můžete štítek nahradit malým obrázkem značky. Za předpokladu, že máte technicky zdatné publikum, význam v tomto případě by měl zůstat stejně jasný.

Samozřejmě nebude fungovat ve všech případech, a pokud existuje nebezpečí dvojznačnosti, měli byste ji hrát v bezpečí a používat textový štítek. Když už jsme to řekli, není důvod vybrat si výhradně jeden nebo druhý - můžete využít atraktivních oko-lovit vlastnosti ikon spolu s jasností textu tím, že společně používají; i když v takovém případě budete obchodovat mimo prostor.

Highrise , aplikace CRM, použije ikonu značky namísto textového štítku před seznamem značek.

7. Kontextové ovládací prvky.

Existuje několik přístupů, které můžete použít v návrhu rozhraní, které se týkají kontextu a konzistence. Jeden diktuje, že byste měli zachovat kontrolu nad všemi aplikacemi nebo webovými stránkami, abyste měli jistotu, že lidé vědí, kde je všechno, a nezaměňujte. Druhým přístupem je změna ovládacích prvků nebo navigace na základě kontextu každé stránky nebo okna. Přístup založený na kontextu je takový, v němž zobrazujete pouze věci, které uživatel potřebuje k dokončení úkolu, v němž pracují v daném kontextu.

Dobrý příklad těchto dvou přístupů lze vidět v nedávném redesignu rozhraní Microsoft Office. Office 2003, stejně jako jeho starší sourozenci, se řídili zásadou návrhu, aby byly věci konzistentní. Měli jste na obrazovce celou řadu nástrojových lišt zobrazených na obrazovce a ty se nezměnily, zda pracujete s tabulkami, grafikou, textem nebo obrázky. Společnost Microsoft přepracovala toto rozhraní pro sadu Office 2007 pomocí přístupu založeného na kontextech. Nahoře vidíte stuhu - nebo soubor karet. Když je vybrána, karta e ach zobrazuje sadu ovládacích prvků relevantních pro jakýkoli daný úkol , ať už se jedná o korekturu, práci s grafikou nebo o psaní.

Přístup založený na kontextech umožňuje zobrazovat méně kontrol v určitém okamžiku, ale současně více kontrol, které jsou relevantní pro daný úkol . Nedoporučuji používat kontextově náročný přístup k obecnému návrhu webových stránek, protože pro většinu webových stránek lidé očekávají konzistentní navigaci na celém webu. Důvodem je to, že každá webová stránka je jiná a způsobila by mnohem větší náročnost procházení, pokud by se jednotlivé stránky na určitém webu lišily.

To vše je možné použít pro webové aplikace, protože to nejsou jen jednoduché weby - jsou to kusy softwaru, které žijí v oblacích. Lidé pravděpodobně budou věnovat spoustu času webové aplikaci a budou mít více příležitostí dozvědět se, jak to funguje . Složitost některých webových aplikací znamená, že skutečně potřebujete využít kontextově orientovaný přístup, protože pokud tomu tak není, bude na obrazovce příliš mnoho času, aby někdo zpracoval. Zobrazením pouze několika relevantních ovládacích prvků pro daný úkol mohou vaši uživatelé zjistit, co mají dělat v mnohem méně času.

Piha , aplikace pro sledování času, má přepínač v horní části hlavního panelu nástrojů. Přepíná mezi ovládacími prvky časového vstupu a ovládacích prvků sestav, zobrazuje pouze jednu sadu současně. To dává smysl, protože buď zadáváte čas, nebo sestavujete zprávu - ne dvě věci najednou.

Na závěr ...

"Nejjednodušší způsob, jak dosáhnout jednoduchosti, je promyšlené snížení" - John Maeda, Zákony jednoduchosti .

Zjednodušení vašeho rozhraní, skrytí pokročilých funkcí a odstranění zřejmé je cesta k jednoduššímu rozhraní . Po této cestě budete čelit mnoha překážkám. Pro každou funkci, kterou skryjete nebo odnášíte, budou lidé, kteří si stěžují a vyžadují, abyste je vrátili zpět. Ale každý z vašich uživatelů má jiné potřeby a používá webovou aplikaci nebo webové stránky jiným způsobem. Pokud budete poslouchat všechny požadavky na funkce a potřeby a budete jít tak daleko, jak adresovat a implementovat je všechny, je nepravděpodobné, že byste dospěli k zenitu softwarového designu. Je pravděpodobné, že narazíte do hluboké jámy, ze které je téměř nemožné vylézt.

Jakmile přidáte funkci, je velmi těžké ji vytáhnout, protože lidé ji začnou používat a někteří na ní budou závislí. Z tohoto důvodu se ujistěte, že každá funkce a každý prvek rozhraní, který přidáte, dává smysl a přidává do vašeho produktu skutečnou hodnotu . Další funkce znamenají více ovládacích prvků a obsah. Více ovládacích prvků a jejich obsahu ztěžuje jednoduché a bezproblémové rozhraní.

Jednoduchost spočívá ve snižování a reorganizaci komplexu na malé a zvládnutelné. Pokud byste něco chtěli, měli byste se snažit zbavit se spíše než přidat. Produkt s menším počtem tlačítek nemusí být nutně méně výkonný - pravděpodobně je lépe navržen .

Napsal výhradně pro WDD Dmitrij Fadeyev. Řídí blog nazvaný použitelnost Usability Post .

Používáte některou z těchto technik ve svých návrzích? Myslíte si, že pomáhají uživateli? Sdělte nám své zkušenosti.