Voice & tone

Názvy polí a popisky

Správně zvolené názvy pomáhají zákazníků se lépe orientovat v administraci a výrazně zlepšují jejich prožitek při práci na jejich webu. 

Názvosloví výrazně ovlivňuje, jak budou lidé vnímat solidpixels jako produkt. Dobře zvolené popisky jsou základem:

• Přehlednosti a zřetelnosti v administraci
• Vytváření mentálního modelu o rozhraní i značce
• Snadného používání funkcí na platformě
• Odlišení od jiných aplikací

Používáme popisné názvy

Skvělý název je popisný a vyjadřuje, co dané nastavení dělá. Uživatel dokáže dopředu odhadnout, co se po úpravě nastavení stane.

✔︎ Filtrovat bez přenačtení stránky

✘ AJAXové filtrování

Jsme konkrétní

Vyhýbáme se obecným pojmenováním, používáme konkrétní názvy. Z názvu musí být jasné, co daná funkce dělá.

✔︎ Velikost písma

✘ Velikost

✔︎ Verifikační kód

✘ Kód

Nepoužíváme technické zkratky

Běžní uživatelé neznají technické zkratky, a proto v UI nepoužíváme odborný žargon, pokud není jiná alternativa. Např. AJAX, URI. Výjimkou jsou zkratky, které jsou zavedené v běžném jazyce jako SMS nebo SEO. Pokud pro zkratku není vhodný ekvivalent, je nutné ji dostatečně vysvětlit.

✔︎ Asynchronní načítání

✘ AJAX

✔︎ Konverzní tlačítko

✘ CTA

Jsme konsistentní

Pro typově stejná / podobná nastavení používáme stejné názvy, např. Velikost písma je vždy velikost písma, nikoli výška písma. Pokud pro označení navigace používáme termín "navigace", nepoužíváme už výraz "menu". Konsistencí názvů vytváříme uživatelům mentální model toho, jak naše administrace funguje.

Pokud je v rozhraní popisek, který neodpovídá pravidlům, je třeba ho opravit. Příklad pro "navigaci":

✔︎ Navigace

✘ Menu

✔︎ Hlavní navigace

✘ Hlavní nabídka

✔︎ Druhotná navigace

✘ Sekundární menu

Diakritika a formální vlastnosti

Popisky a nadpisy formulářových polí píšeme bez tečky / dvojtečky na konci. Stejně tak nepoužíváme dvojtečku pro vytvoření umělé skupiny, raději zvolte pomlčku. 

✔︎ Vyberte stránku

✘ Vyberte stránku:

✔︎ Odesílatel opt-in e-mailu

✘ Odesílací e-mail Opt-in E-mailu

✔︎ Facebook - tajný klíč

✘ Facebook: tajný klíč

Čeština je srozumitelnější

Preferujeme české názvy, protože chceme, aby uživatelé rozhraní rozuměli. Anglický termín lze použít pouze v situacích, kdy neexistuje český ekvivalent 

✔︎ Facebook - přístupový klíč

✘ Facebook - access key

✔︎ Událost

✘ Event

Skupiny

Různé části aplikace vyžadují seskupovat interaktivní prvky, čímž je vytvářena hierarchie uživatelského rozhraní. Při tvorbě skupin je nutné zachovávat konsistentní logiku, abychom uživatele nemátli a docílili skvělého UX.

Seskupujeme logické celky nastavení

Některé nastavení k sobě tématicky patří, a proto je seskupujeme. Skupiny vytváří hierarchii nastavení, a proto se uživatelé v UI lépe orientují.

Nastavení týkající se jednoho prvku

Pokud máte více nastavení, která se týkají jednoho prvku a je žádoucí, aby ho uživatel upravoval najednou , je dobré se zamyslet nad seskupením do jedné komponenty.

Pořadí nastavení v UI

Dodržujeme vždy stejné pořadí, pokud jde o nastavení bloku nebo vzhledu.

Bloky

Nastavení bloků zachovává konsistentní strukturu, aby bylo předvídatelné. Pokud není nějaká skupina aplikovatelná pro daný blok, jen se vynechá.

1. Zdroj dat (např. pro výpisy)
2. Primární nastavení - specifické volby pro konkrétní blok
3. Vzhled
4. Ostatní nastavení
5. Pokročilé

Vzhled

Názvy skupin se odvíjejí od jejich účelu. Obecně je dobré seskupovat responzivní hodnoty, stavy komponenty, nastavení pro konkrétní typy komponent.

1. Text
2. Barvy
3. Rozměry
4. Rámeček
5. Stín (efekty)
6. Ostatní

Stavy

Stavy jsou úzce svázané s danou komponentou, např. tlačítkem. Základní styl tlačítka rozšiřují stavy "po najetí" a "aktivní" stav. Nepoužíváme stavy v popiscích nastavení jednotlivých polí, např. "Barva výchozího pozadí" a "Barva aktivního pozadí".  

Tlačítka

Tlačítka představují akční prvek v administraci. Dobře popsané akce vytvářejí u uživatelů odpovídající očekávání toho, co se po kliknutí na akci stane.  

Akce začínají slovesem

Po kliknutí na tlačítko se v CMS vždy něco konkrétního stane, a proto akce popisujeme slovesem. Sloveso píšeme v infinitivu. 

✔︎ Propojit s facebookem

✘ Propojení s facebookem

✔︎ Poslat testovací požadavek

✘ Test

Název akce vyjadřuje, co se stane

Je důležité vyjádřit popiskem, co se po kliknutí reálně stane. Zabráníme tím frustraci a zmatení uživatelů.  

Nastavení vzhledu

Pravidla pro textace nastavení

• Prvky, které nastavují stejné vlastnosti musí být ovládané stejnou komponentou
• Názvy položek jsou v prvním pádu
• Vlastnosti jsou seskupené podle logických celků, např. základní styl, styl po najetí, aktivní styl, atd.
• Pokud je nadpis skupiny pro "styl po najetí", nepoužíváme textaci "po najetí" u jednotlivých položek ve skupině

Slovníček

Název, Titulek, Jméno - Name, Title

Popisky políček v CMS nesou vždy označení název. Jméno je určeno pro osoby, např. jméno odesílatele e-mailu nebo jméno v účtu uživatele. Titulek používáme pro hlavní nadpis stránky nebo záznamu.  

Design