it-swarm-eu.dev

Jak definujete interakce v maketě?

Jsem programátor a designér UX/UI. Když navrhuji věci, obvykle vytvářím statické obrazy toho, jak bude rozhraní vypadat. Problém je, že většina uživatelských rozhraní není statická; mění se a mění velikost od vstupu uživatele. Samozřejmě vím přesně, jak by rozhraní mělo reagovat na takový vstup, ale u velkých projektů musí být klient a další programátoři schopni vzít si makety a porozumět interakcím. Jak tedy v maketě ukážete, jak váš design reaguje a reaguje na uživatele?

17
Jonathan Dumaine

Nejlepší způsob, jak popsat interakci, je modelovat ji s interaktivním prototypem.

Existují různé prototypovací nástroje jako Axure nebo ten, který vyvíjíme, Handcraft. Ať už použijete kterýkoli z nich, jde o to, že vám umožní ukázat vašemu klientovi, kolegům atd., Co se stane, když interagujete s prvky makety. Získáte mnohem lepší výsledky s použitím prototypu, který vám ukáže interaktivitu, než u makety s možností kliknutí. Je možné ukázat základní změny stavu pomocí maket a v procesu navrhování je fáze, kde to může být užitečné, ale existují některé věci, které je obtížné popsat pomocí statických obrázků, jako jsou animace (v určitých situacích životně důležité), citlivost ( klíčovým prvkem interaktivity) a v případě nativních nebo webových aplikací „pocit“ používání této konkrétní platformy.

7signals hovoří hodně o tom, jak přeskočí drátové snímky a jde rovnou do HTML. Napsal jsem příspěvek na blog před několika měsíci o přednášce, ve které popsali svůj postup.

Pokud však chcete obohatit statické makety, Interaktivní notace skicování Jakuba Linowského je dobrým výchozím bodem pro způsob interakce popisující UML:

interactive sketching notation

Viz Výhody/nevýhody PSD vs HTML makety pro podobnou diskusi:

Pokud stavíte web nebo aplikaci, jsou makety HTML mnohem lepší, protože maketa navrhujete ve formátu co nejblíže finálnímu produktu. To vám umožní mnohem snadněji stanovit očekávání, omezuje vás na to, co je v konečném produktu možné, a poskytuje mnohem větší flexibilitu.

25
Rahul

Pokud interaktivní maketa není možnost, zkuste text. Můžete přidat čísla, která ukazují na části statického obrazu nebo drátového modelu, a poté pro každé číslo zadat poznámky k interakci.

alt text

Nahoře: příklad ukazovacího čísla.

5
JeromeR

Pokud nemáte možnost něčeho, jako je Axure (nebo jiný interaktivní prototypovací nástroj nebo dokonce HTML nebo Flash), myslím, že vaše nejlepší sázka je wireframe "standardní" nebo "výchozí" zobrazení, a pak zobrazit v dalších drátech alternativní stavy jednotlivých modulů.

Podle mých zkušeností je spoléhání se na textové anotace k vyjádření změn obvykle nedostatečné - udělal jsem příliš mnoho projektů, kde byly dokonale anotované drátěné snímky nesprávně pochopeny nebo nesprávně postaveny, protože klienti/vývojáři/atd. chyběly důležité textové detaily, které by bylo možné lépe zachytit vizuálně.

2
Michael Histen

Vím, že tohle je půl roku, ale protože to nikdo ještě nezmínil, budu:

Bill Buxton napsal knihu nazvanou „skicování uživatelských zkušeností“ , která se zabývá problémem „skicování“ návrhu interaktivního designu - jak můžeme zprostředkovat koncepty a vzorce interakce explorativním způsobem, tj. Rychle a levně, ale ne příliš abstraktní?

2
Jan