Dialog

Základní struktura

<div class="MessageBox">
    <div class="Header">
        <div>Title</div>
    </div>
    <div class="Content">
        <div>Lorem ipsum dolor sit amet…</div>
    </div>
    <div class="bottom-buttons">
        <div class="standard-buttons">
            <button class="btn btn-large primary">Button</button>
            <button class="btn btn-large flat">Button</button>
        </div>
    </div>
</div>

Nadpis

Dialog komunikuje s uživatelem pomocí nadpisu a tlačítky.

Jste si opravdu jisti?

Přejete si pokračovat?

Jedná se o zcela zbytečný text, protože nemá žádnou informační hodnotu. Namísto prázdných vět se uživatele rovnou ptejte na danou záležitost.

Pozor!

Nastala chyba!

Uživatel by měl být o nestandardním stavu aplikace informován smysluplným textem v neutrálním tónu. Vykřičíky jsou nezdvořilé, namísto "Pozor" nebo "Chyba" je vhodnější uživateli rovnou sdělit potřebou informaci.

Omlouváme se za…

Je nám líto, ale…

Omluvami dáváme navenek najevo, že o výskytu případného nedostatku víme, ale neumíme ji napravit. Raději uživatele naveďte, co má v tomto okamžiju dělat.

Pokud je informace natolik jednoduchá a zřejmá, je možné titulek vynechat a zobrazit pouze tělo zprávy.

Tlačítka

Jsou častým komunikačním prvkem mezi uživatelem a počítačem. Jejich správné pojmenování je kritickým bodem v použitelnosti a přívětivosti aplikace.

Podle významu podávané inforamce lze dialog do tří základních typů:

• Oznámení
• Rozhodnutí

Oznámení

Uživateli je nabídnuto pouze jedno tlačítko pro zavření dialogu – typicky "Zavřít" nebo jiné tlačítko s popiskem semanticky navazujícím na zobrazenou informaci.

Rozhodnutí

Uživatel je dotázán, aby rozhodl o situaci, kvůli které byl dialog zobrazen. Primární (potvrzovací) tlačítko je vždy umístěno zcela vpravo, sekundární (zamítací) potom nalevo.

Pojmenování tlačítek