Web aplikace, díl 3. – dokončení návrhu uživatelského rozhraní

minulém díle jsem shrnul teorii přístupu k uživatelskému rozhraní a ukázal jsem svou představu o titulní stránce naší aplikace. Dnes se naplno ponoříme do wireframů všech ostatních obrazovek, se kterými se uživatelé setkají.

Hledáte něco na faktury?

Fakturoid – tisk a správa faktur pro živnostníky a malé firmy. Konečně jednoduše.

Mimochodem, dopadlo to nakonec úplně jinak, než v této sérii článků ;)

Ještě než začneme s ostatními částmi, mám tu drobnou úpravu titulky, uvádím ji spíš proto, aby pak byly všechny wireframy na jednom místě, než že by na tom extra záleželo. Jde o to, že v minulém díle jsem navrhoval po najetí myši nabídnout uživateli možnost označit fakturu jako zaplacenou a menší ikonu pro úpravu faktury. Když jsem o tom pak přemýšlel, přišlo mi užitečnější dát tam spíš možnost zobrazit celou fakturu na obrazovku — ikona lupa — s možností rovnou ji vytisknout.

Obrázek č. 1 – Úvodní stránka aplikace, PDF verze

Mohli byste se ptát, proč odkaz „Zaplaceno” tvoří slovo, zatímco odkaz na náhled jen malá ikona? Jde o aplikaci obecného pravidla, kdy se snažíme dát větší prostor a usnadnit přístup k tomu, co bude uživatel dělat častěji a znesnadnit to, co by ho mohlo odvést na špatnou cestu nebo mu jinak „ublížit”. Je to motiv, který budu opakovat často, takže stojí za vypíchnutí.

Ale teď už pojďme dál.

Stránka přidání/upravení faktury

Obrázek č. 2 – Přidání/upravení faktury, PDF verze

Obsah této stránky máme z velké části daný náležitostmi faktury, ale výzva, jak to všechno přehledně poskládat, není zanedbatelná. Rád používám layout, ve kterém jsou popisky polí formuláře (tag label) formátovány nalevo, zarovnané ke svým pravým okrajům. Umožňuje nám to, rychle je přeletět pohledem, nemusíme oko a mozek zatěžovat tak, jako je tomu v případě, kdy jsou popisky nad jednotlivými políčky.

Jak vidíte, porušil jsem tento přístup pro políčka s datumy. Jednak už by pod sebou zabírala zbytečně moc místa a pak patří druhem obsahu k sobě, takže proč to nezdůraznit tím, že je dáme na jeden řádek.

Pak tu máme položky faktury. Platné sazby DPH máme pod kontrolou v sekci nastavení. Aplikace by mohla sama poznat, jestli je dodavatel plátce DPH a podle toho zobrazovat nebo nezobrazovat sazby DPH, ale i plátce nepřidává daň k fakturám do zahraničí, takže se nám bude hodit i třetí možnost „Ne”.

Při vstupu na stránku přidání faktury budou zobrazena jen políčka pro jednu položku, další si budeme moct přidat pomocí tlačítka (perfektní místo pro použití trošky Ajaxu). Na ubrání položek bude samozřejmě sloužit červené tlačítko vlevo od labelu položky.

Obvyklým výsledkem zadávání faktury je, že ji chceme uložit a vytisknout, proto je přesně tohle náplní největšího tlačítka, ale občas chceme fakturu jen uložit nebo jen vytisknout, odtud ta menší tlačítka.

Za zmínku stojí ještě malé odkazy na přidání dodavatele/odběratele. Už se mi několikrát stalo, že jsem šel přidávat fakturu a zjistil jsem, že v databázi ještě není odběratel, takže tady je řešení.

Vlastně stejné rozložení nám poslouží i při úpravě již vložené faktury. Drobné úpravy, které budou vhodné, nechám vaší představivosti. Pojďme se mrknout na stránku, kde se nám budou přidané faktury hromadit.

Stránka přehledu faktur

Obrázek č. 3 – Přehledu faktur, PDF verze

Jak vidíte z obrázku, nejvíce místa zabírá tabulka podobná té z úvodní stránky. Obsahuje všechny vydané faktury za dané období, přičemž nejnovější nahoře. Myslím, že teď už se v mém systému wireframů vyznáte, takže chápete, jaké možnosti se nabízí po najetí myší nad řádek s fakturou.

Na stránce máme k dispozici ještě menu pro přepnutí zobrazovaného období a druhu faktur. Později se nám možná bude hodit možnost vyfiltrování faktur pomocí podrobnějších kritérií, ale zatím to nebudeme řešit.

Stránka přehledu subjektů

Obrázek č. 4 – Přehledu subjektů, PDF verze

Uvažoval jsem tak, že nejčastější důvod, proč se budeme chtít podívat na subjekty, bude jejich úprava nebo smazání. Proto je pro přidání subjektu na této stránce vyhrazeno je velké velké tlačítko – obdobně jako bylo na titulní stránce pro přidání faktur.

Vidíte, že jsem zvolil výpis s výrazným řádkováním a velkými písmeny z abecedy, která nám pomohou při rychlém projíždění stránky. Od určitého počtu subjektů se nám bude hodit i možnost skočit přímo na dané písmeno, kterou nám dává menu pod tlačítkem „Přidat subjekt”.

Ve sloupcích Odběratel, Dodavatel jsem umístil symboly, které zároveň fungují jako přepínače — výchozí pozice je ta, kterou jsme zadali při vkládání subjektu, viz níže — kliknutím daný subjekt přiřadíte nebo naopak odeberete jako dodavatele/odběratele. K čemu to? No, pamatujete si ty selecty pro výběr subjektů při vkládání faktury? V databázi máme všechny subjekty v jedné tabulce, takže je v základu budeme mít všechny v obou selectech, což ale rozhodně nemůžeme potřebovat, protože drtivá většina z nich budou pouze odběratelé, tak proč si s nimi zbytečně zaplňovat select, kde nás nezajímají.

To samozřejmě znamená, že budeme muset odpovídajícím způsobem upravit model databáze, ale to se rozhodně vyplatí.

Stránka přidání subjektu

Obrázek č. 5 – Přidání subjektu, PDF verze

Teď už můj „wireframový rukopis” určitě znáte dost na to, abyste se v tomhle nákresu vyznali sami. Obdobně jako u faktur nám stejný layout poslouží i pro úpravu jíž vložených subjektů.

V komentářích k dílu o návrhu databáze mě Karel Benák upozornil, že budeme muset nějak pořešit mazání adres, protože smazaná adresa nám bude chybět při výpisu archivované faktury. Budeme tedy muset přihodit sloupec do tabulky, kde uložíme, jestli je adresa aktivní nebo ne.

Troufám si říct, že případ mazání adresy bude dostatečně výjimečný na to, abychom si v uživatelském rozhraní dovolili postarat se o něj tak, že neaktivní adresy vypíšeme až po aktivních s jiným, „zašedlým”, vzhledem. To bude pro začátek úplně stačit.

Stránka nastavení

Obrázek č. 6 – Nastavení, PDF verze

Nastavení je asi nejjednodušší stránka. Zatím mě napadlo, že budeme potřebovat nastavit aktuální sazby DPH, ale také musíme ze subjektů vybrat „sebe”, to jest subjekt(-y), jejichž faktury se mají započítávat do výnosů. Faktury všech ostatních subjektů půjdou do nákladů. A opět budeme muset upravit databázi, ale klidně na to budeme moci použít ten samý sloupec, který už jsme nuceni přidat pro rozlišení, jestli jde o dodavatele nebo odběratele.

Co dál s naší aplikací

Za normálních okolností by wireframy sloužily jako podklad pro grafika, který by naše nákresy oblékl do slušivého kabátku a my bychom zatím začali záměr implementovat v nějakém našem oblíbeném programovacím jazyku.

Já jsem se rozhodl, že pojmu další práci na web aplikaci jako praktickou lekci při mém učení Ruby a frameworku Ruby on Rails. Jsem totiž přesvědčen, že moje zkušenosti v PHP nejsou na takové úrovni, abych nějak výrazně přispěl k tomu, co se můžete dočíst jinde (viz zdroje níže). Moje základní rada, na kterou bych přísahal, je dodržujte architekturu MVC. Zjistíte, že vám vznikají kostky stavebnice a vy jste schopni z nich stavět různé výtvory. O přehlednosti, úspoře času a dalších výhodách nemluvě.

Samozřejmě se budu chtít se svými zážitky s Ruby on Rails podělit, takže tohle není poslední díl, jen nedokážu říct, kdy bude další. Už teď vidím, že budu minimálně následující dva týdny pracovně tak vytížen, že se k tomu dostanu jen zřídka. Ale uvidíme…

Shrnutí odkazů

15