09 - Projektowanie interfejsów

Podstawowe wiadomości

Projektowanie interfejsów to sugerowanie takich rozwiązań, które spełnią określone wymagania.
Ten proces, można podzielić na dwie części:
a) Conceptual design - definiowanie modelu , który w sposób abstrakcyjny opisuje interakcje i koncepty związane z produktem.
b) Physical design - definiowanie szczegółów: kolory, dźwięki, obrazki, układ strony.

Szkice i Prototypy

Elementem ułatwiającym projektowanie jest korzystanie ze szkiców i prototypów. Prototyp to pojedyncza manifestacja designu, która pozwala na interakcje z systemem oraz jego ewaluacje. Szkic różni się od prototypu stopniem pracy jaki włożono w jego stworzenie, szkice są szybkie i tanie.

Wartość szkicowania i prototypowania jest widoczna na różnych etapach procesu projektowego:
a) Szkice pozwalają nam na uchwycenie idei i znalezienie najwłaściwszego rozwiązania.
b) Prototypy pozwalają na dopracowanie rozwiązania, które uznajemy za właściwe.

Więcej o szkicach i prototypach znajdziesz w książce http://www.billbuxton.com/bookFlyer.pdf

Dobre praktyki

Na wstępnym etapie prac warto eksplorować jak najwięcej możliwych rozwiązań. Stworzenie kilku odmiennych rozwiązań pozwala z dystansem spojrzeć na każde z nich. Dzięki takiemu działaniu zwiększa się szansę na znalezienie najlepszego rozwiązania.

Zarówno szkice jak i prototypy nadają się do testowania z użytkownikami. Im wcześniej zacznie się zbieranie informacji zwrotnej na temat tworzonego projektu, tym szybciej i taniej będzie można wprowadzić poprawki.

Warto korzystać z prac które wykonali przed nami inni projektanci. Dwie z najpopularniejszych metod to:
a) Benchmarking - czerpanie z rozwiązań jakie oferuje konkurencja.
b) Wzorce projektowe - opieranie się na dostępnych schematach projektowych np. http://ui-patterns.com/

Narzędzia do projektowania

http://axure.com/ - bardzo dobre i rozbudowane narzędzie do tworzenia prototypów.

http://office.microsoft.com/pl-pl/visio-help/ - rozbudowane narzędzie autorstwa Microsoftu.

http://www.balsamiq.com/ - narzędzie pozwalające w szybki sposób budować proste interfejsy.

http://labwireframe.com/ - polski odpowiednik Axure i Visio dostępny w wersji sieciowej.

Pomocne serwisy:

http://patterntap.com/ , http://uxporn.uxpin.com/ - wyszukiwarki rozwiązań i inspiracji projektowych

Strona na licencji Creative Commons Attribution-ShareAlike 3.0. Autorzy: A. Czoska, M. Komosiński, B. Kowalczyk, A. Kupś, M. Lubawy