Wireframy, skicování
Učili jste se někdy kreslit? Máte ke všemu přesné návody. Jak kresli mangu, jak nakreslit draka, jak se
naučit kreslit. Přesné kroky, přesné postupy. Jak kreslit, čím kreslit, jakou tužku a gumu si pořídit. Jak
kreslit linii a tvar očí atd.
U skicování wireframů na nic takového nenarazíte. Nemusíte studovat žádné návody, nemusíte e
složitě připravovat a nakupovat drahé pomůcky. Jediné, co musíte zjistit je to, pro koho web kreslíte.
1. Potřebujete vůbec web?
2. Kdo ta bude chodit?
3. Co je pro toho člověka nejdůležitější?
4. Máte nápad?
5. Skicujte
6. Wireframujte
7. Prototypujte
Kdo jsou vaši uživatelé?
Je chyba myslet si, že naši uživatelé jsou všichni – je chyba dělat web pro všechny a je chyba
navrhovat web podle sebe.
Manželce se to líbí tak a tak. Manželka nenavrhla na Amazonu tlačítko Nakoupit bez registrace, které
vydělalo o 300 mil. dolarů víc
Neptejte se lidí, kteří nejsou cílová skupina.
Další špatný argument – když to budou chtít, tak si to najdou. To platí, dokud se neobjeví
konkurence.
Neexistuje univerzální design – web musí jasně promlouvat k vybraným cílovým skupinám, ostatní
mají smůlu. Více možností, jak najít jednu informaci různým způsobem.
Persony
Slouží o lepší představě, kdo jsou uživatelé webu, pomáhají vývojovému týmu zůstat u země a
nezapomenout na toho člověka, co bude web používat.
Jsou persony k něčemu?
Ani v jednom mém projektu nebyl prostor a finance, aby se vytvářely persony s takovou pečlivostí,
jakou si zaslouží. Prostě, aby to bylo k něčemu.
Jejich vytvoření musí předcházet rozsáhlý uživatelský výzkum (rozhovory, dotazníky, ankety, analýza
statistik, focus group) a na to prostě nejsou prachy.
Bez person jste náchylnější k vytvoření chyb, protože jste závislí pouze na vašem odhadu. Proto se
musí víc testovat, abyste riziko těchto chyb minimalizovali.
Skica
Základní myšlenka, nápad. Čím víc skic uděláte, tím je pravděpodobnější, že najdete optimální řešení.
Přizvěte co nejvíce lidí do vašeho týmu. Jděte mimo své obvyklé pracovní prostředí.
Skicování základního konceptu,který není perfektní na pixel
Wireframing from scratch with no basic interface concept is hard because you can’t push pixels as
fast as you can think. When you’re concepting the interface, you need to think about all the ways you
can execute the user experience. There are a lot of ideas that could pop into your head that you
won’t be able to get on pixel canvas as fast as you could get them on pen and paper. Sketching lets
you explore different options quickly so that you can figure which direction is best. Getting a basic
concept of the interface before you wireframe makes the process faster and easier. It’s hard to come
up with multiple concepts on the fly when wireframing because you’re working in a software
program. Not being able to push pixels as fast as you think limits your brainstorming speed and
flexibility.
Úkol:
Dostali jste nabídku podílet se na redesignu knihovny FF MU. Cílovou skupinou jsou
noví studenti, kteří se potřebují seznámit se základními službami knihovny, ale také
zkušenější studenti, kteří pokročilé služby pravidelně využívají. Základní požadavek je
na přehlednost obsahu, snadné dohledání informace a přehledné prezentování všech
hlavních služeb.
Skupinky po 4 – 5 lidech
Rozdělte si A4 do 6ti polí. Máte přesně 5 minut, abyste všechna tato pole zaplnili.
Každý návrh by měl být jiný.
Prezentujte svůj návrh kolegům
Každý řekne 3 věci, které se mu líbily
Udělejte každý jeden nový návrh
Byl lepší, než ten první?
5 tipů od Leonarda da Vinciho
- Svůj návrh kreslete 4x – 5x, vždy z jiné perspektivy. Informace přidávejte nebo ubírejte.
- Ke svým skicám přidávejte anotace, nechejte si na ně v návrhu místo. Anotace můžou rovnou
odpovědět na dotazy lidí, kterým budete skicu ukazovat + ani vy na nic nezapomenete.
- Spolupracujte s ostatními, když skicujete. Konzultujte s tím, kdo rozumí produktu, službě.
Konzultujte s tím, kdo má lepší představivost než vy. Ukažte svoji práci jiným lidem.
- Zapojte fantazii, buďte zvědaví, ptejte se sami sebe. Musíte vystoupit ze své komfortní zóny.
Čím víc návrhů uděláte, tím větší je šance, že najdete něco inovativního – vznikne více řešení
jednoho problému a vy můžete vybírat z mnoha – ne se smířit s jedním.
- Hledejte nové kombinace, slučte své starší nápady, vyberte ty nejlepší kombinace.
Mind mapy k čemu je využít
1) Koncept celého webu – kreativní mind mapy (kreslit rukou a pastelkama, potřebujeme
pravou půlku mozku)
2) Struktura navrženého webu + kroky jednotlivých funkcí – stačí obyčejné mind mapy (stačí
xmind a levá, analytická část mozku)
http://www.mitvsehotovo.cz/2013/03/6-tipu-jak-co-nejlepe-pracovat-s-myslenkovymi-mapami/
http://danielgamrot.cz/mapovani-nad-kavou/
Začněte psát od středu papíru!!!
Wireframe
Hrubý návrh, který definuje strukturu a obsah jednotlivých stránek. Jde o jeden ze základních
stavebních kamenů nového webu. Jednoduché weby wireframy nepotřebují, u těch složitějších
pomáhají pochopit komplexně všechny funkce, popsat je a otestovat, zda jsou myšlenkové pochody
designera správné a zda se shodují s klientem.
Docela často bez wireframů narazíte na problém: Pro jste to udělali, jak jsem to zadal a ne, jak jsem
to myslel.
Wireframy pomáhají setřídit si myšlenky.
Jde o jednoduché geometrické tvary, kde se nedoporučuje používat příliš grafických motivů.
Nesmíme se soustředit na design, ale pouze na funkčnost.
Nástroje pro tvorbu wireframu
- Papír a tužka
- Axure
- Jakýkoliv program, který najdete pomocí dotazu Wireframe tools free
- https://gomockingbird.com/mockingbird/
Jsou lepší papírové prototypy, nebo softwarové?
- Papírové vás nutí myslet kreativně.
- Je to jednoduché, nejste ničím omezeni, žádná pravidla, přednastavené styly.
- Jednoduché sdílení s týmem.
- Je jednodušší vyhodit špatný nápad, který jste kreslili pár minut.
- Důležitější jsou nápady, ne forma.
- Papír je nejrozšířenějším nástrojem návrhářů po celém světě
- Nesoustřeďte se na detaily, jakmile to bude moc pěkné, bude těžké dělat změny.
- Neumíte kreslit? Vytvořte si šablony, které si vystřihnete a budete skládat, ale je to už dost
omezující.