[UI] Posunovat, hledat, zvýrazňovat
Další zastavení nad příklady zajímavých uživatelských rozhraní. Tentokrát o posunu po stránce, zvýrazňování článků, adresovém poli v prohlížečích a náhledu výsledků vyhledávání.
Listování v článcích
Server treehugger — klasická dlouhá stránka, dva úzké sidebary a obsahový blok s nadpisy článků, ilustračním obrázkem a odkazem na pokračování textu — se snaží umožnit čtenářům „listovat” články pomocí širokého tlačítka na pravé straně.
Tlačítko je tak vysoké jako místo, které zabírá daný článek a po kliknutí se stránka posune přesně na další článek, pokud dojedete až dolů, tak vás kliknutí přenese na další stránku.
Zajímavá fičůra, ne? Ještě víc by se mi líbilo, kdyby se tlačítko dalo aktivovat mezerníkem, protože ten už posunutí stránky standardně obstarává. Nejsem si ale jistý, jestli jde tohle chování prohlížečů přepsat. Počítám, že nějaký javascript by to vyřešil. A pak by ještě pomohlo, kdy se posun animoval, protože ten skok stránky je trochu nepřirozený. Animované posunutí by ještě umocnilo dojem toho listování.
37signals a automatický posun stránky
Když už jsme u toho pohybu po stránce, tak tady je další video od Signálů. Je to přesně ukázka leštění, kterého si uživatel ve výsledku nejspíš nevšimne, ale jeho dojem z interakce s aplikací bude o něco plynulejší. Brambora k bramboře…
Engadget a zvýraznění článků
Po delší době jsem se nějak dostal na Engadget a koukám, že mají nový design. Zaujal mě způsob, jakým upozorňují na zajímavé články. V pravém sidebaru je výrazný blok, ve kterém se střídají obrázky k představovaným článkům a jejich nadpisy. Můžete v nich listovat, kliknutí na nadpis vás přenese na článek. Chytré.
Výběr URL Safari versus ostatní
Když v Safari začnete psát do adresového pole, vyhledá v historii stránky, které odpovídají tomu, co píšete a nabídne vám je k výběru. Na první pohled stejné chování jako všechny ostatní prohlížeče. Jenže Safari vám navíc automaticky nastaví výběr na první položku z nabídky, takže většinou už musíte jen zmáčknout Enter. U všech ostatních prohlížečů musíte ještě navíc aktivovat vybírání adresy tím, že zmáčknete šipku dolů.
Firefox a ostatní
Safari
Apple a vyhledávání na webu
Stránky Applu jsou učebnice pro nás všechny. Občas tam jen tak zajdu a proklikávám se obsahem, abych „nasál” jejich design (v tom širším smyslu, ne jen vzhled). Teď jsem si všiml, že upravili prohledávání webu. Konkrétně mám na mysli tu nabídku, která se vám objeví, když začnete do vyhledávacího pole zadávat slovo. Výsledky, které nejvíce odpovídají zadání jsou zobrazeny podle kontextu, kde byly nalezeny a navíc mají velmi chytře vybíraný ilustrační obrázek. Paráda!
Narazili jste na nějaký zajímavý příklad uživatelského rozhraní, o který se chcete podělit? Napište mi na jsem [zavináč] jankorbel.cz a já ho dám do příští edice.
Ostatní díly série
Leštit, hledat, vkládat, nastavovat
Najměte si mě
Máte zájem moje služby v oblasti uživatelského rozhraní nebo informační architektury?
Kontaktujte mě na jsem [zavináč] jankorbel.cz



„Výběr URL Safari versus ostatní“ ~ To nemusí být vůbec výhoda. Ve svém Firefoxu používám vyhledávání třeba „g klíčové slovo“ nebo „img klíčové slovo“, které mi po odklepnutí otevře Google s výsledky. Pokud by prohlížeč označil první nabízený odkaz z historie (a v historii jsou i takové věci), musel bych se vracet nahoru k tomu, co chci já a ne prohlížeč. Jsem proto u Firefoxu rád, že mi nevnucuje historii a nechá na mě, co si vyberu. Navíc na screenu, který příkládáš se mi zdají titulky stránek (Firefox) jako dobrý bonus k přehlednosti.
Když zmiňuješ upoutávky na články na Engadget, zkus se podívat i na PhoneArena. Tam je upoutávka řešena čtyřmi čtverci uprostřed nahoře. V nich se střídají zajímavé články – vždy obrázek s titulkem článku, po najetí myší se zobrazí i krátky popisek a kliknutím se otevře. Sice chybí listování, ale zase tam jsou čtyři najednou a střídají se samy. Dokáže to docela zaujmout.
carnero: To by v Safari fungovalo taky, jakmile zadávaný výraz neodpovídá ničemu v historii, tak se focus vrátí do adresového pole.
PhoneArena je taky zajímavý příklad, jak se vyrovnat s nedostatkem místa. Díky za něj.
jan: Napadlo mě to, ale jelikož skladuji historii prohlížeče několik měsíců, nachází shodu i s tím vyhledáváním. Téměř vždy, když něco hledám, nabídne mi Firefox i něco z historie.
jinak když už jsme u toho adresního řádku prohlížeče, tak Firefox v novějších verzích zobrazuje možnosti „navštívených stránek“ pod adresním řádkem v „roletce“ ve dvou řádcích:
v prvním je title stránky a v sruhém je o něco menším fontem adresa (url) přičemž je podtržením zvýrazněna domena (www.example.com) a navíc je ještě vlevo favicon (ta se zobrazuje i během priohlížení stránek)
u treehugger mi jen chybí možnost skákat nahoru. chvilku jsem se posouval dolů a najednou mě napadlo, že bych zase rád o pár článků výš a to už musím sahat po sidebaru. to je celkem škoda myslím
DŠ: Hm, dobrá poznámka. Asi by bylo vhodné obětovat tu horní část bloku pro odkaz na předcházející článek. A klávesová zkratka by mohla být Shift + mezerník.
jenze zase ff3 dava focus pri psani tam, kde je mys. Zkuste najet cca do 4 radku, neco napsat – objevi se nabidka s focusem do 4. Radku. Pakvstaci jen malo a jste tam, kde jste rozhodne byt nechteli. Typicky priklad zmrsene usability. Tech je ostatbe ve ff3 vic.
Ff3 beta test 4 @ gnome
jakub suchy: To dělala beta 4 a beta 3. Beta pět už tuhle hloupou chybu nedělá. A proto je to beta, aby tyhle mršiny odstraňovali.
Honzo, více takových článků ! Díky :)
carnero: skvele, vyzkousim
–> ff3/4 uability
hlavně nový systém záložek, o nové ikonce (hvězda) nemluvě