What is a prototype?

EnglishPolish

Prototypes are interactive mockups of websites and mobile applications designed to look and feel like the real thing. They’re much quicker to make, and although they aren’t full-featured, they allow us to spot mistakes before we build the real thing.

Prototypy są interaktywnymi makietami stron internetowych i aplikacji mobilnych zaprojektowanymi tak, aby wyglądały i działały jak prawdziwe. O wiele szybciej można je zbudować, choć nie są w pełni funkcjonalne, pozwalają na wykrycie błędów, zanim stworzymy prawdziwy produkt.

Prototypes are built using screen design tools, most of which come with collaboration features to help stakeholders assist with feedback. Some also come with ideation tools to help flesh out the initial wireframe, while others have hand-off tools that help designers hand over the final mockup to developers.

Prototypy tworzy się przy użyciu narzędzi do projektowania ekranów, z których większość wyposażona jest w funkcje do współpracy, aby pomóc zainteresowanym stronom w uzyskaniu informacji zwrotnej. Niektóre z nich zawierają również narzędzia do generowania pomysłów, które pomagają wypełnić początkowy szkielet, podczas gdy inne wyposażone są w funkcję przekazywania dokumentacji ukończonych makiet programistom.

The importance of prototyping

EnglishPolish

There are approximately seven billion humans on this earth; designing an optimal experience right off the bat for even a small fraction of them would be quite an achievement. So whenever we design something, it’s important to understand that the earlier iterations won’t be very good. Design is rarely an overnight success, which is why we need prototyping.

Na ziemi żyje około siedmiu miliardów ludzi; zaprojektowanie od razu optymalnych wrażeń nawet dla małej części z nich byłoby sporym osiągnięciem. Tak więc, za każdym razem, gdy coś projektujemy, ważne jest, aby zrozumieć, że wcześniejsze wersje nie będą zbyt dobre. Projektowanie rzadko przynosi natychmiastowy sukces, dlatego potrzebujemy prototypowania.

Where failure is inevitable, prototyping allows us to fail faster. When combined with an effective feedback and collaboration workflow, it provides the additional eyes that help identify flaws and turn them into improvement opportunities.

Tam, gdzie niepowodzenie jest nieuniknione, prototypowanie przyspiesza porażkę. W połączeniu ze skutecznym sprzężeniem zwrotnym i pracą zespołową, zapewnia dodatkowy wgląd, który pomaga zidentyfikować błędy i wykorzystać je w celu udoskonalenia projektu.

Without prototyping, we spend a lot of time, money, and resources to build a product that users can’t use. Assuming we didn’t burn through our budget, we’d be back to the drawing board.

Bez prototypowania poświęcamy dużo czasu, pieniędzy i środków na zbudowanie produktu, którego użytkownicy nie będą mogli używać. Zakładając, że nie wyczerpiemy całego budżetu, wrócimy do deski kreślarskiej.

Prototyping is a preventative workflow that reminds us that ideas are disposable. It saves us a ton of time in the long run, and helps us fix issues before they become too expensive. We shouldn’t think of prototyping as a waste of time, but rather a method of identifying and discarding the ideas that simply aren’t going to work.

Prototypowanie jest działaniem prewencyjnym, które przypomina nam, że pomysły można odrzucać. Oszczędza to mnóstwo czasu w dłuższej perspektywie i pomaga rozwiązywać problemy, zanim staną się zbyt kosztowne. Nie powinniśmy myśleć o prototypowaniu jako o marnowaniu czasu, ale raczej jako o metodzie identyfikowania i odrzucania pomysłów, które po prostu nie będą działać.
Web design - app development and testing.

The prototyping process

EnglishPolish

Internal testing
Whether we’ve designed a low-, mid-, or high-fidelity prototype, each one starts with the initial concept. This is the iteration that most likely has the most flaws, which actually makes it somewhat difficult for real users to test. Before anything, it’s recommended to run through a low-key feedback session with other designers.

Testy wewnętrzne
Niezależnie od tego, czy projektujemy prototyp o małej, średniej czy dużej dokładności, zaczynamy od koncepcji początkowej. Jest to wersja, która najprawdopodobniej ma najwięcej wad, co w efekcie sprawia, że testowanie jest nieco utrudnione dla prawdziwych użytkowników. Na początku zaleca się więc przeprowadzenie krótkiej sesji dyskusyjnej z innymi projektantami.

This will eliminate any obvious design flaws and will allow to get more valuable feedback that we’ll derive from real users later on. Before moving forward, we should address the feedback that’s been offered by designers.

Wyeliminuje to oczywiste wady projektowe i pozwoli później na uzyskanie bardziej wartościowych opinii prawdziwych użytkowników. Zanim przejdziemy do następnego etapu, powinniśmy zająć się opiniami przedstawionymi przez projektantów.

Stakeholder testing
This step is often the most uncomfortable. After restricting feedback to designers, it’s time to cast a wider net and start involving other stakeholders, which can include the client and non-designers. On one hand, non-designers can weigh in on the solution that we’ve delivered from a different perspective; on the other hand, they may suggest ideas that to a designer might seem nonsensical.

Testowanie przez interesariuszy 
Ten etap jest często najbardziej niekomfortowy. Po konsultacji z projektantami nadchodzi czas, aby przedstawić projekt szerszemu gronu  interesariuszy, w tym klientom i osobom niebędącym projektantami. Z jednej strony, osoby, które nie są projektantami, mogą mieć wpływ na produkt, który opracowaliśmy z innej perspektywy; z drugiej strony, mogą proponować pomysły, które będą wydawać się bezsensowne dla projektanta.

This actually offers a basis for some A/B testing, where we create two versions and see which version users respond to better. As mentioned, since prototyping is very quick and inexpensive, it doesn’t take a lot of time or resources to create several iterations, test them, and discard the failed ones.

W rzeczywistości daje to możliwość do przeprowadzenia testów A/B, w których tworzymy dwie wersje i widzimy, która z nich bardziej odpowiada użytkownikom. Jak wspomniano, ponieważ prototypowanie jest bardzo szybkie i niedrogie, nie potrzeba dużo czasu ani zasobów, aby stworzyć kilka wersji, przetestować je i odrzucić te nieudane.

User and usability testing
The aim of user testing is to see whether or not the design solves the user’s problem; it works best around the low-fidelity prototyping stage. Usability testing, on the other hand, works best around the mid- and high-fidelity prototyping stages, where the aim is to measure the effectiveness of the design in terms of usability and UX.

Testowanie użytkownika i użyteczności
Celem testów użytkownika jest sprawdzenie, czy projekt rozwiązuje problem użytkownika; najlepiej sprawdza się to na etapie prototypowania o małej dokładności. Natomiast testy użyteczności najlepiej sprawdzają się na etapie prototypowania średniej i dużej dokładności, gdzie celem jest zmierzenie efektywności projektu w zakresie użyteczności i wrażeń użytkownika.

Create a smooth, efficient prototyping process
Prototyping is not an easy task. Different stages require different tools, and raise different concerns, whether that’s user needs, navigation, information architecture, usability, accessibility, UI, or visual design. Attempting to make all of these considerations at once and diving straight into high-fidelity prototyping is commonly known to be bad practice. A range of tools is recommended to tackle each consideration in a logical sequence, and collect feedback at regular intervals.

Tworzenie sprawnego, wydajnego procesu prototypowania
Prototypowanie nie jest łatwym zadaniem. Poszczególne etapy wymagają różnych narzędzi i budzą różne obawy, niezależnie od tego, czy chodzi o potrzeby użytkownika, nawigację, architekturę informacji, użyteczność, dostępność, interfejs użytkownika czy projekt wizualny. Próba rozważenia tych wszystkich kwestii naraz i przejścia od razu do tworzenia prototypów o wysokiej dokładności jest powszechnie uważane za złą praktykę. Zaleca się stosowanie szeregu narzędzi, które pozwolą na zajęcie się każdym z tych zagadnień w logicznej kolejności i zebranie informacji zwrotnych w regularnych odstępach czasu.
Source of English text: https://www.invisionapp.com/design-defined/prototype/

Exercises

Exercise 1.

Answer the questions

  1. What is a prototype?
  2. What is the function of prototypes?
  3. What are prototypes built with?
  4. What are the earlier iterations like?
  5. How do you understand the statement that “prototype allows us to fail faster”?
  6. What happens without prototyping?
  7. Don’t you think that prototyping is a waste of time?
  8. What is internal testing about?
  9. Which step of prototyping is the most uncomfortable?
  10. What is A/B testing?
Exercise 2.

Exercise 3.

Exercise 4.

Exercise 5.