11. Pravidla tvorby uživatelského rozhraní

Pravidla tvorby uživatelského rozhraní 11. Pravidla tvorby uživatelského rozhraní

Ing. Jan Schmidt, Ph.D. Ing. Tomáš Zahradnický, EUR ING, Ph.D.

České vysoké učení technické v Praze Fakulta informačních technologií Katedra počítačových systémů

Příprava studijních programů Informatika pro novou fakultu ČVUT je spolufinancována Evropským sociálním fondem a rozpočtem Hlavního města Prahy v rámci Operačního programu Praha — adaptabilita (OPPA) projektem CZ.2.17/3.1.00/31952 – „Příprava a zavedení nových studijních programů Informatika na ČVUT v Prazeÿ. Praha & EU: Investujeme do vaší budoucnosti

J. Schmidt & T. Zahradnický (ČVUT FIT)

Pravidla tvorby UR

BI-TUR, 2011, Předn. 11

1 / 57

1

Úvod

2

Text

3

Nabídky Titulky „roletÿ menu Názvy položek menu Seskupování položek v menu Dynamické položky v menu Přepínané položky v menu Ikony v menu Podmenu Kontextové menu

4

Okna Typy oken Skladba okna Posouvání v okně Toolbar Názvy pro nová okna


Pravidla tvorby UR


2 / 57

Umísťování oken na obrazovku Změna velikosti oken Zavírání okna Paletky Dialogy Alerty

5

Prvky uživatelského rozhraní v okně Prvky uživatelského rozhraní obecně Push button Icon button Help button Radio button Checkbox Pop-up menu Combination box Icon button s pop-up menu Color well


Pravidla tvorby UR


3 / 57

Image well Date picker Slider Progress bar Static text Text input field Scrolling list Disclosure triangle List view Tab view Group box


Pravidla tvorby UR


4 / 57

Úvod

Psychologie v HCI Psychologie v HCI [?] Psychologie v HCI zkoumá, jak lidské dovednosti a omezení mohou být zohledněny při vývoji efektivních systémů a obvykle k tomu používá empirické výsledky. Poznatky z kognitivní psychologie jsou zanášeny nejen do prvků uživatelského rozhraní (UR), ale také do pravidel jeho návrhu. K tomuto účelu každý výrobce poskytuje sadu pravidel. Sady pravidel pro nejčastější platformy: Android: User Interface Guidelines GNOME: GNOME Human Interface Guidelines iOS: iOS Human Interface Guidelines KDE: KDE Human Interface Guidelines Java: Java Look and Feel Design Guidelines Mac OS X: Apple Human Interface Guidelines Windows: Windows User Experience Interaction Guidelines J. Schmidt & T. Zahradnický (ČVUT FIT)

Pravidla tvorby UR


5 / 57

Text

Pravidla pro psaní textu I Text používáme v popiskách prvků UR (PUR), nabídkách, (dialogových) oknech, kontextové nápovědě, atd. Použití textu má být konzistentní; věty jasné a smysluplné. Některé znaky v textu mají zvláštní význam: mezera mezi větami — píše po tečce, a to pouze jedna. dvojtečka — používá se v textu, který uvozuje text pro PUR v okně — popisek. Kombinace popisku, dvojtečky a dalšího ovládacího prvku tvoří logickou skupinu. Dvojtečku nepoužíváme v menu, názvech tabů, hlavičkách list a table views. Dvojtečka může být životně důležitým prvkem pro screen readery! tři tečky (výpustka, . . . ) — zvláštní znak, který uživatele informuje o tom, že než bude zvolená akce pokračovat, bude třeba poskytnout další informace (vždy se zobrazí okno, atd.). Používejte znak . . . a nikoliv tři tečky . . . z důvodů accessibility. b Položka menu: „Uložitÿ — soubor bude uložen bez dalších dotazů. Položka menu: „Uložit jako. . . ÿ — před uložením bude další okno. J. Schmidt & T. Zahradnický (ČVUT FIT)

Pravidla tvorby UR


6 / 57

Text

Pravidla pro psaní textu II Tlačítko: „Tiskÿ — dokument bude vytištěn bez dalších dotazů. Tlačítko: „Tisk. . . ÿ — očekáváme tiskový dialog.

Popisky (label) PUR by měly být snadno pochopitelné, pokud možno bez technického žargonu. Velká písmena — rozlišujeme 2 druhy kapitalizace: počáteční písmeno věty (sentence capitalization) — používáme pro normální texty. počáteční písmena všech slov (title capitalization) — používá se převážně v angličtině, a to pro popisky, prvky nabídek, tlačítka. S velkým písmenem píšeme všechna slova kromě předložek, spojek a členů. V češtině se tento typ kapitalizace nepoužívá.

Kontrakce — některé jazyky umožňují kontrakce (do not → don’t). Normálně je nepoužíváme, pokud není nutné ušetřit místo. Zkratky — doporučuje se je nepoužívat, pokud nejde opravdu o zřejmou zkratku (DVD-ROM, CMYK, USB). J. Schmidt & T. Zahradnický (ČVUT FIT)

Pravidla tvorby UR


7 / 57

Nabídky

Obecně

Nabídky obecně I Nabídky (menu) představují seznam příkazů, atributů, nebo stavů, ze kterých může uživatel vybírat. Menu rozdělujeme na: menu bar menu — menu, které je součástí lišty menu. Mac OS X globální lišta menu, jiné platformy mají menu v okně.

dock menu — menu, které se objevuje z Docku na Mac OS X.


Pravidla tvorby UR


8 / 57

Nabídky

Obecně

Nabídky obecně II kontextové menu — menu s položkami k danému kontextu; zobrazí se po stisku pravého tlačítka myši nebo Ctrl + tlačítka na Mac OS X.

menu okna (window menu) — obsahuje operace s oknem na Windows. Vyvoláme pravým tlačítkem myši nad titulem okna nebo Alt + mezerník. Poklepání na ikonu v levém horním rohu okna vybere výchozí položku z tohoto menu (Close).


Pravidla tvorby UR


9 / 57

Nabídky

Titulky „roletÿ menu

Titulky „roletÿ menu Jako titul rolety používejte popisky, které přesně popisují její obsah. na základě titulu má být uživatel schopnen predikovat, co v menu bude! např. u menu Písmo bude uživatel očekávat, že menu bude obsahovat věci týkající se velikosti, rodiny a stylu písma.

Popisek má být co nejkratší, nejlépe 1 slovo, bez obětování jasnosti. Snažte se nepoužívat ikonu jako titulek. nemíchejte textová menu s ikonami.

Titulek menu musí být vždy aktivní uživatel musí mít možnost vidět co je v menu, i pokud jsou všechny jeho položky vypnuté.


Pravidla tvorby UR


10 / 57

Nabídky

Názvy položek menu

Názvy položek menu Názvy položek menu mají být přesné a srozumitelné tak, aby byl uživatel schopen predikovat, co se stane vybere-li tuto položku. Položky popisují akci anebo atributy, které se aplikují na akt. objekt: akce — sloveso nebo fráze označující akci, která se stane po vybrání. atributy — př. jména nebo fráze popisující změnu, která se provede.

Používejte výpustku (. . . ), pokud je pro dokončení nutná další akce — tedy objeví se další okno, ve kterém musí uživatel potvrdit akci.

Vypněte všechny položky, které nelze v daném kontextu zvolit. V angličtině: nepoužívejte členy, pokud to zcela není nutné. Uživatel ví, v jakém kontextu je. Stačí „Delete Accountÿ namísto „Delete the Accountÿ. používejte title capitalization. J. Schmidt & T. Zahradnický (ČVUT FIT)

Pravidla tvorby UR


11 / 57

Nabídky

Seskupování položek v menu

Seskupování položek v menu Položky v menu by měly být členěny do logických skupin a vzájemně od sebe odděleny separátorem. Pořadí položek v menu by mělo být podle četnosti použití. časteji používané položky by měly být v menu výše.

Snažte se nekombinovat akce a atributy ve stejné skupině v menu. Vytvořte skupiny pro všechny akce/atributy mající mezi sebou vztah. položky Bold, Italic, Underline aplikují atributy, proto je seskupíme.

Pokud obsahuje menu vícekrát stejné slovo, zvažte použití podmenu: položky Zarovna vlevo, Zarovnat na střed, Zarovnat vpravo, Zarovnat do bloku sloučíme do podmenu Zarovnat s položkami Vlevo, Na střed, Vpravo, Do bloku.

Nevytvářejte příliš dlouhá menu, je obtížné se v nich orientovat. může se objevit i scroller!


Pravidla tvorby UR


12 / 57

Nabídky

Dynamické položky v menu

Dynamické položky v menu Dynamická položka v menu je taková, která se mění při přimáčknutí modifikační klávesy (Shift, Ctrl, Alt, Option, Windows, . . . ). Zajistěte, aby použití dynamického menu nebylo jedinou možnou cestou vykonání nějaké akce — položka není vidět, dokud uživatel nestiskne modifikační klávesu! Nevyžadujte stisk více modifikačních kláves současně k zobrazení změněného názvu dynamické položky.

Stisk klávesy Option

−−−−−−−−−→


Pravidla tvorby UR


13 / 57

Nabídky

Přepínané položky v menu

Přepínané položky v menu I Přepínaná položka v menu je taková, která se změní po jejím vybrání. Rozlišujeme celkem 3 druhy: pár dvou opačných položek menu, z nichž pouze jedna je vždy aktivní. tento typ používáme, pokud máme v menu dostatek místa.

jedna položka, jejíž jméno se mění. pokud nemáme v menu dostatek místa, používáme tento typ.


Pravidla tvorby UR


14 / 57

Nabídky

Přepínané položky v menu

Přepínané položky v menu II položka má fajfku. používáme k indikaci atributu, který zrovna platí. uživatel může snadno v menu vidět, které všechny atributy platí.


Pravidla tvorby UR


15 / 57

Nabídky

Ikony v menu

Ikony v menu Použití ikon v menu může uživateli pomoci poznat správnou položku. Nikdy nepoužívejte ikonu bez textu. a to ani když si myslíte, že bude její význam každému jasný.

Používejte uživateli známé ikony a jen pro významné položky. Nesnažte přiřadit za každou cenu ikonu ke každé položce v menu! 1

1

Microsoft Outlook. Obrázek stažen z Google.


Pravidla tvorby UR


16 / 57

Nabídky

Podmenu

Podmenu I Podmenu (submenu, hierarchické menu) obsahuje položky, které souvisejí s jednou položkou menu. položky umístěné do submenu nezvětšují množství položek v menu.

Podmenu je označeno trojúhelníkem za jménem položky. Položka menu, která má podmenu, má být vždy zapnutá:

Submenu zvyšují složitost aplikace. Pokud máte v submenu více než 5 položek, zvažte použití samostatného menu. J. Schmidt & T. Zahradnický (ČVUT FIT)

Pravidla tvorby UR


17 / 57

Nabídky

Podmenu

Podmenu II Vždy použijte submenu namísto odsazení položek v menu.


Pravidla tvorby UR


18 / 57

Nabídky

Podmenu

Podmenu III Snažte se nepoužívat více než 1 úroveň submenu.


Pravidla tvorby UR


19 / 57

Nabídky

Kontextové menu

Kontextové menu Proskytuje přístup k často používaným příkazům nějakého objektu. Mělo obsahovat jen nejčasteji používané příkazy. Není doporučeno v něm používat podmenu a klávesové zkratky. Ujistěte se, že příkazy v kontextovém menu jsou dostupné jiným způsobem, například v menu.


Pravidla tvorby UR


20 / 57

Okna

Typy oken

Typy oken I okna aplikace — hlavní okno aplikace.

okna dokumentu — okno s dokumentem aplikace. Je oddělené, anebo součástí okna aplikace (Multiple Document Interface). 2


Pravidla tvorby UR


21 / 57

Okna

Typy oken

Typy oken II paletky — jde o okna, obvykle s nástroji pro úpravu dokumentů, které jsou ve vrstvě nad okny dokumentů a aplikace. dialogy — okno, které se objeví obvykle v reakci na uživatelovu akci a vyžaduje další alci od uživatele. alerty — okno indikující chybu, a které vyžaduje uživatelovu akci.

paletka 2

dialog

dialog (sheet)

alert

Obrázek převzat z www.codeproject.com.


Pravidla tvorby UR


22 / 57

Okna

Skladba okna

Skladba okna I rám3 — skládá se z orámování okna, lišty s názvem (title bar) a tlačítek. Windows — v levém rohu může být ikona

Mac OS X — součástí title baru může být vestavěný toolbar, případně jméno souboru a jeho verze.

vnitřek okna4 — obsahuje prvky uživatelského rozhraní (PUR) okna.


Pravidla tvorby UR


23 / 57

Okna

Skladba okna

Skladba okna II Dokumenty a okna aplikace jsou tvořena: povinně: title barem — i pokud okno nemá žádný titulek a ani toolbar, je title bar důležitý aby se s oknem mohlo pohybovat. zavíracím tlačítkem

nepovinně: horizontálními a/nebo vertikální posuvníky (scroll bar) tlačítky pro minimizaci a maximalizaci ikonou (vlevo — Windows/uprostřed — Mac OS X) jménem okna PUR pro změnu velikosti okna (např. grow box/size grip)

3 4

Na Windows rám nazýváme non-client areou okna. Na Windows obsah nazýváme client areou okna.


Pravidla tvorby UR


24 / 57

Okna

Posouvání v okně

Posouvání v okně Je-li zobrazovaný obsah větší než rozměry, bude potřeba posuvník. Táhlo posuvníku je proporcionálně velké k množství obsahu. Posuvník má reagovat na kolečko/kuličku myši. Posuvník má poskytovat živou odezvu táhnutí táhla posuvníku myší. Klepnutí na posuvník do oblasti mimo táhlo posune obsah o 1 stránku tím směrem, kde je táhlo. Klepnutí a držení na posuvníku do oblasti mimo táhlo způsobí posunování o 1 stránku tak dlouho, dokud se táhlo neposune pod myš, čímž posouvání skončí.


Pravidla tvorby UR


25 / 57

Okna

Toolbar

Toolbar Je lišta nejčastěji používaných příkazů formou tlačítek s ikonou. Používejte jen dobře uživatelovi známé ikony.

Pořadí tlačítek zleva do prava by mělo být podle četnosti použití. Pokud vhodné, vytvořte v toolbaru skupiny tlačítek oddělené mezerou. Akce každého tlačítka v toolbaru má být dostupná jako příkaz v menu. Dovolte uživateli toolbar skrýt a změnit tlačítka, která obsahuje.


Pravidla tvorby UR


26 / 57

Okna

Názvy pro nová okna

Názvy pro nová okna Uživatelé očekávají, že po spuštění aplikace se objeví okno. obecně může jít o okno aplikace, okno dokumentu a sadu paletek.

Jako jméno nového okna použijte: jméno aplikace, pokud jde o aplikační okno (nikoliv okno dokumentu)

„beze jménaÿ, pokud jde o okno nového dokumentu. Pokud již takové okno existuje, pak přidáme použijeme „beze jména 2ÿ, . . .

Windows: u aplikací, které mají jediné okno, které je aplikační i dokumentové se pak používá „ jméno dokumentu — jméno aplikaceÿ.


Pravidla tvorby UR


27 / 57

Okna

Umísťování oken na obrazovku

Umísťování oken na obrazovku Okna dokumentu: zobrazujeme tak, aby bylo vidět maximum dokumentu, tj. blízko levého horního okraje obrazovky. další okna dokumentu zobrazujeme posunutě vpravo a dolů o 20 pixelů vzhledem předešlému.

Aplikační okno: centrujeme takto: horizontálně na sřed vertikálně tak, aby pod oknem zbývalo 2× více místa než nad ním.

další okna otevíráme opět o 20 pixelů posununě.

Snažte se zachovávat pozici a velikost, se kterou uživatel okno zavřel. Ve vícemonitorovém prostředí zobrazte na obrazovce, na které je: Windows: Task bar (primary screen) Mac OS X: menu J. Schmidt & T. Zahradnický (ČVUT FIT)

Pravidla tvorby UR


28 / 57

Okna

Změna velikosti oken

Změna velikosti oken Pokud uživatel změní velikost okna (např. tažením za size grip, za okraj), je tato změna zaznamenána jako uživatelská velikost okna. Funkce maximalizačního tlačítka: Windows: stávající velikost okna se uloží a okno se roztáhne na celou obrazovku; stejné jako poklepání na titul okna. Mac OS X: okno se přepne z uživatelské velikosti do standardní velikosti, která je vhodná pro daný kontext, anebo se vrátí do uložené (uživatelské) velikosti.

Funkce minimalizačního tlačítka: Windows: okno se složí do Task baru. Mac OS X: okno se složí do Docku; stejné jako poklepání na titul okna.


Pravidla tvorby UR


29 / 57

Okna

Zavírání okna

Zavírání okna K zavření okna dojde: vybere-li uživatel například Soubor > Zavřít. stiskne-li klávesovou zkratku pro zavření okna. stiskne-li tlačítko pro zavření okna Windows: vybere-li uživatel z window menu zavřít nebo poklepá-li na ikonu okna.

Zobrazte dialog pro potvrzení zavření souboru, nebyl-li doc. uložen.

Pokud nejde o dokumentové okno a je-li toto okno poslední, měla by aplikace skončit. J. Schmidt & T. Zahradnický (ČVUT FIT)

Pravidla tvorby UR


30 / 57

Okna

Paletky

Paletky Paletka je pomocné okno, které poskytuje volby pro aktivní dokument nebo výběr. Paletky mohou být speficické pro aplikaci anebo systémově globální. Paletky by měly být vidět jen tehdy, je-li aplikace aktivní a má-li otevřeno okno, ke kterému se paletky vztahují. Každý paletka by měla mít vhodný titulek. Paletky nemají minimizační tlačítko.


Pravidla tvorby UR


31 / 57

Okna

Dialogy

Dialogy I Podle modality rozlišujeme dialogy: Document modal — zabrání uživateli provést jakoukoliv akci s daným dokumentem, dokud nebude dialog ukončen. Na Mac OS X — sheety.

je připevněn k dokumentu → uživatel bude vždy vědět, ke kterému oknu tento dialog patří. sheet by měl být zobrazen nad případnými paletkami. nepoužívejte sheet, pokud máte otevřen jeden dokument vícekrát nebo pokud musí uživatel s dokumentem interagovat. nepoužívejte sheet s okny, které nemají titulek. J. Schmidt & T. Zahradnický (ČVUT FIT)

Pravidla tvorby UR


32 / 57

Okna

Dialogy

Dialogy II Application modal — zabrání uživateli zcela pracovat s aktuální aplikací, dokud nebude dialog ukončen.

Modeless — nikterak uživatele neomezuje.


Pravidla tvorby UR


33 / 57

Okna

Alerty

Alerty Alert je typem dialogu, který se používá pokud OS nebo aplikace potřebují uživateli sdělit důležitou zprávu. Než může aplikace pokračovat, musí být alert uzavřen.

Pokud se váže alert k nějakému dokumentu, je vhodné použít sheet.


Pravidla tvorby UR


34 / 57

Prvky uživatelského rozhraní v okně

Prvky uživatelského rozhraní obecně

Pravidla pro prvky uživatelského rozhraní v okně obecně Existuje mnoho názvů pro PUR (control, widget, window, . . . ). Používejte systémové PUR a omezte vlastní, pokud jen možno. Dbejte na to, aby všechny byly stejné velikosti (některé platformy nabízí více velikostí PUR). Většina PUR se umí natáhnout na šířku, ale ne na výšku! Neměňte písmo a velikost písma u systémových PURů. Dodržujte pravidelné rozestupy PUR. Toolbar — pokud ho máte, měl by obsahovat jen ikony. Kombinace ikon a textu se nedoporučuje. Každá položka v toolbaru by ale měla obsahovat popisku, která se použije při změně ikon v toolbaru uživatelem.


Pravidla tvorby UR


35 / 57


Push button

Push button I Jde o standardní tlačítko. použití ikony a textu současně se nedoporučuje — výjimka: na Windows může obsahovat symbol štítu k indikaci, že akce tlačítka bude vyžadovat administrátorská oprávnění.

okno může mít výchozí tlačítko, které reaguje na klávesy Return a Enter, které mívá jiný vzhled, a které by mělo reprezentovat vždy bezpečnou akci. pozor na polohu „akčníhoÿ tlačítka: Windows — vlevo Mac OS X — vpravo


Pravidla tvorby UR


36 / 57


Push button

Push button II tlačítko, stejně jako jiné PUR, může mít focus („dotabujemeÿ na něj), pak reaguje na Mezerník.

pokud tlačítko provádí nebezpečnou akci, mělo by být oddělené od „bezpečnýchÿ tlačítek viditelnou mezerou.

jako text tlačítka používáme obvykle slovesa v infinitivu (Smazat, Přidat, Uložit jako. . . ) nebo podstatná jména v prvním pádě (Tisk, Barvy, Nastavení. . . ).


Pravidla tvorby UR


37 / 57


Icon button

Icon button Jde o tlačítko s ikonou. Používají se v toolbarech Typicky nemají rámeček Jednoznačný význam — některé symboly vnímány rozdílně! Ikona by měla mít popisek — dostatečně výstižný, title capitalization. Ikona by měla být přehledná a neobsahovat zbytečně moc věcí! Vzhled ikon by měl být konzistentní (stejné stíny, stejné nasvícení, stejná barevnost, . . . )


Pravidla tvorby UR


38 / 57


Help button

Help button Jde o standardní ikony s otazníkem, která slouží pro vyvolání nápovědy. Měl by být ve spodním levém nebo spodním pravém rohu okna. Používejte systémový, nezavádějte si vlastní!


Pravidla tvorby UR


39 / 57


Radio button

Radio button Používá se pro výběr 1 z N možností, které se vzájemně vylučují. Pokud je N > 5, zvažte použití pop-up menu (combo boxu). Není doporučeno používat radio button abyste jeho zvolením spustili nějakou akci — pokud třeba → push button. Pokud jsou radio buttony umístěny vodorovně, měly by mít stejné mezery.


Pravidla tvorby UR


40 / 57


Checkbox

Checkbox — zaškrtávací pole Skupina checkboxů slouží k výběru jedné nebo více možností

Checkbox umožňuje také třetí stav (mixed) Checkboxy většinou používáme vertikálně a zarovnáváme je na stejný levý okraj — případně ještě hierarchicky.


Pravidla tvorby UR


41 / 57


Pop-up menu

Pop-up menu (rozevírací nabídka) Slouží k poskytnutí několika vzájemně vylučujících se možností Nedílnou součástí pop-up menu je dolů směřující šipka (Windows) nebo obousměrná šipka (Mac OS X) Položky bývají podstatná jména, přídavná jména, příslovce (Jediná) Vybraná položka je označena fajfkou:

Pop-up menu by mělo: mít standardní dvojtečkou ukončený label

Pop-up menu by nemělo: používat podmenu mít dynamický měnící se obsah být používáno pro výběr více položek najednou J. Schmidt & T. Zahradnický (ČVUT FIT)

Pravidla tvorby UR


42 / 57


Combination box

Combination box (combo box) Combo box = edit field + pop-up menu Zvláštní pop-up menu, které umožňuje uživateli vybrat i vlastní volbu Combo box by měl zobrazovat vždy výchozí smysluplnou hodnotu Text by neměl nikdy přesahovat za šipku označující přítomnost menu Pokud uživatel zadá svoji vlastní položku, není přidána do seznamu!


Pravidla tvorby UR


43 / 57


Icon button s pop-up menu

Icon button s pop-up menu Jde o zvláštní typ tlačítka, které obsahuje pop-up menu. Ikona by měla obsahovat šipku podobně jako u pop-up menu.


Pravidla tvorby UR


44 / 57


Color well

Color well Jde o zvláštní typ tlačítka, které indikuje vybranou barvu.

Stiskem na tlačítko se objeví dialog pro výběr barvy.


Pravidla tvorby UR


45 / 57


Image well

Image well Jde o PUR, který slouží pro vkládání ikony nebo obrázku.

Obrázek se vkládá buď z pop-up menu a/nebo táhnutím a puštěním:


Pravidla tvorby UR


46 / 57


Date picker

Date picker Jde o PUR, který slouží k výběru datumu a/nebo času:

Může mít textovou nebo grafickou podobu. U PUR lze nastavit, mají-li být přítomny šipky pro inkerementaci a dekrementaci (stepper) stepper existuje i jako samostatný PUR:

Grafická podoba PUR by se měla používat v případě, že je žádoucí uživateli umožnit viděl kalendář např. kvůli výběru dne v týdnu.


Pravidla tvorby UR


47 / 57


Slider

Slider (Track bar) Jde o PUR, který slouží k výběru hodnoty z intervalu. Slider bývá vodorovný nebo svislý, případně kruhový. Lze nastavit, jsou-li pod/vedle sliderem/u risky. použijte risky, pokud očekáváme, že pomohou uživateli s výběrem

Některé platformy podporují nastavení tvaru táhla: hranaté se šipkou — pokud máme risky (např. průhlednost) kulaté — pokud nemáme risky (např. hlasitost)

Slider podporuje živou odezvu na hodnotu slideru. Popisek je nutné umístit nejméně k začátku a konci slideru.


Pravidla tvorby UR


48 / 57


Progress bar

Progress bar PUR, který slouží k indikaci stavu, existují 3 typy: synchronní determinate — pro známý počet položek/dobu dodržujte rovnoměrné plnění nechte vždy naplnit až do 100% umožněte uživateli výkon akci přerušit (např. tlačítkem Zrušit)

synchronní indeterminate — pro neznámý počet položek/dobu pokud se počet prvků/čas stane známým → determinate umožněte uživateli výkon akce přerušit pokud potřebujeme místo → asynchronní indikátor

asynchronní — používáme jako indeterminate pro ušetření místa pokud se počet položek/čas může stát známým → synchronní pr. bar. tento PUR nemá label


Pravidla tvorby UR


49 / 57


Static text

Static text Zobrazuje informaci, která nemá být uživatelem měněna. Používá se jako popiska (label) ke PURům, které nemají svůj vlastní popisek. Takový popisek ukončujeme dvojtečkou. Obvykle mají 2 stavy: active — normální aktivní stav

dimmed — vypnutý stav, šedivý

Je dobré, aby šlo text static text PUR vybrat a kopírovat z něj:


Pravidla tvorby UR


50 / 57


Text input field

Text input field (text field, edit field) PUR, který se používá pro jednořádkový vstup uživatele. Měl by mít vždy popisku.

Nezapomeňte by být dostatečně dlouhý, aby se do něj očekávaný text vešel. Pokud existují volby, které by uživatel do tohoho pole psal často, zvažte použití combo boxu.


Pravidla tvorby UR


51 / 57


Scrolling list

Scrolling list (List box) Jde o jednosloupcový seznam mnoha položek s posuvníkem. Položky mohou mít jednobarevné, anebo alternující pozadí. Uživatelé mohou skrolovat, aniž by museli něco vybrat. Nepoužívejte scrolling list k výběru N položek současně! Používejte alternující pozadí, pokud to usnadní výběr a orientaci.

Nezapomeňte na popisek. J. Schmidt & T. Zahradnický (ČVUT FIT)

Pravidla tvorby UR


52 / 57


Disclosure triangle

Disclosure triangle Zobrazuje (nebo skrývá) informaci. Používáme ho pro zjednodučení UR. k zobrazení informace v dialozích majících minimální a rozšířený stav např. zobrazení informace, kterou většina uživatelů nebude vyžadovat.

k zobrazení podpoložek v hierarchickém seznamu.

Popisek by měl obsahovat co se objeví nebo zmizí a měl by se měnit podle toho, jestli zobrazuje nebo skrývá. J. Schmidt & T. Zahradnický (ČVUT FIT)

Pravidla tvorby UR


53 / 57


List view

List view (Table view) Jde o jedno či vícesloupcový seznam mnoha položek, případně s posuvnikem. Každý sloupec má svůj nadpis (hlavičku). Data jsou seřazena podle vybraného sloupce vzestupně/sestupně:

Položky mohou být i editovatelné:


Pravidla tvorby UR


54 / 57


Tab view

Tab view Tab view se skládá z hlavičky a z N panelů. Ze všech panelů je vidět pouze ten, který je vybrán v hlavičce:

Každý panel by měl mít popisek, který nejlépe popisuje obsah panelu. Nepoužívejte pop-up menu jako přepínač jednotlivých panelů. pokud je tabů příliš, hledejte jinou hier. reprezentaci — ne takto:


Pravidla tvorby UR


55 / 57


Group box

Group box Poskytuje možnost, jak rozdělit části okna na logické celky.

Snažte se vyvarovat vnořování group boxů — pro uživatele matoucí. Součástí popisku skupiny může být checkbox, který případně deaktivuje celou skupinu.


Pravidla tvorby UR


56 / 57


Group box

Bibliografie Apple Computer, Inc.: Mac OS X Human Interface Guidelines, 2011. Microsoft Corp.: Windows User Experience Interaction Guidelines, 2011.


Pravidla tvorby UR


57 / 57

11. Pravidla tvorby uživatelského rozhraní

Recommend Documents