Návrh uživatelského rozhraní webové aplikace

Podívejte se, jak se z procesů stal návrh uživatelského rozhraní a jak se vyvíjela webová aplikace Constimator.com. V tomto článku je zaznamenána cesta, jak se drátěný model vyvinul ve webovou aplikaci. Drátěný model (wireframe) slouží k prvnímu návrhu uživatelského rozhraní pro webovou aplikaci.

První návrh

první návrh wireframe

Drátěný model stránky pro výpočty vychází z toho, že zde budou 2 hlavní části. Jedna bude ta, kde si investor vyplní základní údaje o plánované stavbě (levý sloupec). Druhá je ta, kde se budou zobrazovat vypočítané ceny za stavbu. budou zde standardní ceny i nabídky stavebních firem (pravý sloupec). Tento návrh byl vytvořen jen s předběžnou znalostí normy, podle které Constimator počítá.

Druhý návrh

druhy-navrh-wireframe

Druhý návrh více vyzdvihuje funkce aplikace pro výpočet. Byl upravený podle výše zmíněné normy. Stavební firmy jsou méně vidět přímo ve výpočtu. Definování jednotlivých stavebních objektů se zjednodušilo. Sloupec s výsledky zobrazuje detailnější informace. Celá částka je rozdělena na více položek. Uživatel si tak uvědomí, že se stavbou domu souvisí i další náklady.

Spuštění první verze aplikace

prvni-printscreen

Na tomto obrázku si můžete prohlédnout první verzi Constimatoru. Možná ne úplně první verzi, ale tu z listopadu 2011. Webové aplikace obecně mají tu výhodu, že nemusí mezi verzemi rozlišovat. Když se vyvine a otestuje nové vylepšení, může se rovnou deploynout na ostrou verzi. Uživatel není nijak omezován.

Verze v červnu 2012

druhy-printscreen

V současné době vypadá Constimator takto. Přibyly šoupátka, kterými si uživatelé mohou měnit některé z koeficientů. Například na potřebu změny DPH jsem byl upozorněn jedním z uživatelů. Také přibyla možnost zaregistrovat si firmu a zobrazit jí hned pod výpočtem.

Podle vyplněného IČ při registraci si Constimator rozhodne, zda jde o firmu a hned jí zobrazí. Pořadí firem se určuje podle počtu vyplněných polí při ragistraci a hlavně počtem přidaných koeficientů sloužících k výpočtu. Firmy to má motivovat k plnění databáze.

Přispějte

Usnadnil Vám některý rozšiřovací balíček práci a čas? Či snad článek pomohl? Přispějte na další projekty.

Amount: 

Nejnovější články

  • Jednoduchý eshop pro Joomlu s RSForm

    2013-04-23

    Nedávno jsem nasazoval jednoduché e-commerce řešení a byl jsem postaven před hotovou věc, že k tomu bude použit RSForm. Byl jsem trochu skeptický použít RSForm na platby, ale po nasazení musím...

  • Jaký webhosting vybrat pro Joomlu?

    2013-04-18

    Za nějakých 8 let, co se pohybuji kolem Joomly jsem prošel pěknou řádku poskytovatelů webhostingu. Ať už pro hostování mých webů, ale i klientů. Občas jsem opravdu překvapen za jaké služby je někdo...

  • Přístupný web podle Googlu

    2012-08-24

    Přístupné HTML bohužel zajímá málo web developerů. Přitom většinou stačí držet se čistého HTML. Přečtete si pár bodů z přednášky o přístupném HTML. Přednášejícím byl Mike West, člen Google Chrome...

  • Síla přepisování jazyků - Language overrides

    2012-08-14

    Možná jste si toho už všimli. Joomla 2.5 umožňuje z administrace editovat jazykový soubor, kterým dokážete přepsat původní hlášky Joomly. Na webu i v administraci, v každém jazyku extra. Proč je...

  • Propojení Joomla - Google Drive. Formuláře

    2012-08-06

    Google Drive (nedávno ještě Google Docs) je online sada kancelářských programů. Zajímavé je propojení s jakýmkoli webem, v našem případě to bude Joomla. Nejsou k tomu potřeba žádná rozšíření. Co jsem se...

Tip

Rich Snippets for VirtueMart

rich-snippets 207x207This awesome Joomla plugin adds structured data (also called Rich Snippets or meta information) about your VirtueMart products. It generates this automatically from the actual products. The best benefit is that Google can display some of these information right in the search results.

 

EasyCalc

easycalcEasyCalc is component for creating realtime calculators of any type. For example if you need to explain your customers how many time / money / gray hairs atc. they save by using your product / service, let them count it for their situation.