Ocena wykonawcy, która mówi jednym językiem
Audyt trzech ekranów formularza oceny, zestaw komponentów ze stanami i krótkie uzasadnienie decyzji. Formularz obok jest prawdziwy: wybierz gwiazdki, napisz komentarz, dodaj zdjęcie albo spróbuj opublikować opinię bez oceny.
Krok 1
Audyt
Trzy ekrany z materiałów: formularz oceny na webie, formularz oceny na iOS i prośba o ocenę w czacie. Najedź na numer na zrzucie albo na punkt na liście, żeby zobaczyć, czego dotyczy. Każdy punkt ma ważność (krytyczny, średni, niski), a kolejność naprawy jest w kroku 3.
Krok 2
Redesign
Najpierw fundamenty, potem komponenty, na końcu kompozycja. Wszystko poniżej jest zbudowane z tych samych tokenów i działa: przyciski reagują na klawiaturę, gwiazdki na strzałki, licznik liczy znaki.
Przed i po
Te same numery co w audycie (Screen 1 i Screen 2). Po lewej obecny ekran, po prawej nowy formularz (działa). Najedź na numer albo na punkt na liście, żeby zobaczyć parę.
Fundamenty
Dwie warstwy kolorów: paleta Fixly i role, z których korzystają komponenty. Żółty jest zarezerwowany dla jednej głównej akcji, niebieski dla linków i fokusu.
Komponenty
Przycisk
3 warianty, 6 stanów. Etykieta zawsze w sentence case i jako czasownik opisujący skutek. Wyszarzamy tylko wtedy, gdy akcja jest niemożliwa z powodów systemowych.
Skala oceny
Pole dotyku 44 px. Pod gwiazdkami zawsze liczba i słowo. Przysłówki („Dobrze”, „Świetnie”) nie mają rodzaju, więc pasują do każdego zdania. Błąd pojawia się dopiero po próbie publikacji.
Ocena do odczytu
Średnia z przecinkiem dziesiętnym, „Brak opinii” zamiast 0,0, jeden odcień gwiazdki we wszystkich kanałach.
Pole komentarza
Etykieta i wskazówka zawsze widoczne. Licznik od zera, ostrzeżenie od 550 znaków, błąd powyżej 600. Pole rośnie do 240 px, potem przewija się wewnątrz.
Usługa, zdjęcia, karta wykonawcy, komunikat
Usługa ze zlecenia to tag, którego nie da się usunąć, a nie zablokowany checkbox. Zdjęcia mają jedną nazwę na webie i iOS. Karta wykonawcy pokazuje imię w mianowniku, więc nagłówek nie musi go odmieniać.
Anatomia
Z czego składa się formularz i jakie tokeny trzymają odstępy. Włącz nakładkę, żeby zobaczyć odstępy tak, jak w Dev Mode.
Kompozycja i stany
Te same komponenty złożone w formularz. Każdy wariant poniżej jest żywy, startuje tylko z innego stanu.
- Nagłówek „Oceń wykonawcę” bez imienia. Kogo oceniamy, pokazuje karta wykonawcy.
- Jedno pytanie i jeden przedmiot oceny: współpraca. Ta sama fraza w czacie, mailu i formularzu.
- Pod gwiazdkami liczba i słowo, więc znaczenie nie zależy tylko od koloru.
- Komentarz ma etykietę, oznaczenie „opcjonalnie” i stałą wskazówkę.
- Zdjęcia i usługi to osobne, nazwane sekcje, identyczne na webie i iOS.
- Stopka przyklejona do dołu: jedna akcja główna i jedno zdanie o publikacji zamiast pełnego disclaimera.
- Przycisk jest zawsze aktywny. Walidujemy po kliknięciu, bo wyszarzony przycisk nie mówi, czego brakuje.
- Po kliknięciu: przewinięcie do skali i fokus na pierwszej gwiazdce. Błąd to kontur, ikona i tekst, nie sam kolor.
- Komunikat mówi, co zrobić: „Wybierz ocenę, żeby opublikować opinię.”
- Wpisany komentarz zostaje, a błąd znika od razu po wybraniu gwiazdki.
- Pole rośnie do 240 px, potem przewija się wewnątrz.
- Od 550 znaków licznik ostrzega, ile zostało.
- Po przekroczeniu 600 (np. po wklejeniu) nie ucinamy tekstu po cichu. Pole i licznik są czerwone, a komunikat „Komentarz jest za długi.” blokuje publikację.
- Przycisk jest w pasku przyklejonym nad klawiaturą, a tytuł w stałym pasku nawigacji.
Stany i przypadki brzegowe
Jeden formularz przełączany przez kolejne sytuacje: od pustego stanu, przez błędy i limity, po wąski ekran, długie nazwy i puste miejsca w produkcie. Przesuń suwak, użyj strzałek albo kliknij nazwę stanu.
- Co widzi użytkownik
- Dlaczego tak
Skalowanie
Te same komponenty w miejscach, które pokazał audyt: prośba o ocenę w czacie, nagłówek profilu i pojedyncza opinia.
Krok 3
Uzasadnienie
Pięć decyzji, które najbardziej wpływają na strukturę, nazewnictwo i stany. Resztę chętnie omówię na rozmowie.
-
Najpierw słownik, potem piksele
Jedna nazwa na rolę (wykonawca, klient), jeden przedmiot oceny (współpraca) i jedno słowo na całość (opinia: ocena, komentarz i zdjęcia). Nagłówek nie odmienia imienia, bo imię jest w karcie wykonawcy. Te same słowa trafiają do copy, nazw komponentów i tokenów, więc design, content i development mówią jednym językiem.
-
Tokeny w dwóch warstwach
Pierwsza warstwa trzyma paletę Fixly, druga nazywa role (tekst linku, obrys błędu, wypełniona gwiazdka). Komponenty korzystają tylko z ról, więc np. odcień gwiazdek zmienia się w jednym miejscu dla webu, iOS i maila.
-
Komponenty ze stanami zamiast ekranów
Przycisk, skala oceny, pole komentarza, usługa, zdjęcia, karta wykonawcy i komunikat mają komplet stanów. Kolejny widok, np. ocena klienta przez wykonawcę albo odpowiedź na opinię, to złożenie gotowych części, a nie nowy projekt.
-
Stany mówią, co zrobić
Przycisk publikacji jest zawsze aktywny, walidujemy po kliknięciu i przenosimy fokus do pola z błędem. Błąd to kontur, ikona i tekst z instrukcją. Licznik widać od zera, a za długiego komentarza nie ucinamy po cichu. Ocenę opisuje też słowo, bo żółta gwiazdka na białym tle ma niski kontrast.
-
Mniej elementów, każdy na swoim miejscu
Powtarzaną formułkę o regulaminie zastępuje jedno zdanie przy przycisku publikacji. Usługa ze zlecenia to tag, a nie zablokowany checkbox. Zdjęcia i usługi to nazwane sekcje, identyczne na webie i iOS. Na iOS tytuł jest w stałym pasku, a przycisk nad klawiaturą.
Priorytety: co naprawiamy najpierw
Punkty z audytu podzielone według wpływu na biznes. Opinie to podstawa zaufania w marketplace: im mniej opinii i im słabsza ich jakość, tym mniej zleceń dla fachowców i mniej pewności dla klientów. Dlatego kolejność wynika z tego, co blokuje albo zniechęca do wystawienia opinii.
-
Etap 1Krytyczne
Usuwamy to, co blokuje lub zniechęca do wystawienia opinii
- 9 Na iOS klawiatura zasłania przycisk: stopka przyklejona nad klawiaturą.
- 12 Gwiazdki w czacie nie wyglądają na klikalne: skala z podglądem i opisem, kliknięcie otwiera formularz z wybraną oceną.
- 4 Nie wiadomo, czy komentarz jest wymagany: etykieta „(opcjonalnie)”, stała wskazówka, licznik od zera.
- 6 „ZAPISZ” sugeruje wersję roboczą: „Opublikuj opinię” i potwierdzenie „Opinia opublikowana”.
Mierzymy: odsetek rozpoczętych formularzy zakończonych publikacją, odsetek opinii z komentarzem.
-
Etap 2Średnie
Porządkujemy język i znaczenie oceny
- 3 Niejasna skala daje niespójne oceny: „3 z 5: Przeciętnie” zamiast „OK”.
- 11 Trzy różne przedmioty oceny: wszędzie „współpraca” i jeden słownik ról.
- 1 Błędna odmiana imienia: tytuł bez imienia i karta wykonawcy.
- 5 Zablokowany checkbox wygląda jak błąd: chip usługi ze zlecenia.
- 7 Disclaimer konkuruje z akcją: jedno zdanie przy przycisku, treść uzgodniona z działem prawnym.
Mierzymy: rozkład ocen, liczbę zgłoszeń do supportu dotyczących opinii.
-
Etap 3Niskie
Ujednolicamy system przy okazji wspólnych komponentów
- 2 Dwa kroje pisma: jeden krój (Lato) i skala stylów tekstu.
- 8 Tytuł ucina się na iOS: stały pasek nawigacji.
- 10 Zdjęcia nazywane inaczej na webie i iOS: jedna nazwa i jedno miejsce.
- Tokeny i komponenty wspólne dla webu i iOS, potem profil, mail i czat wykonawcy.
Mierzymy: czas projektowania i wdrażania kolejnych ekranów z gotowych komponentów.
Słownik (propozycja)
| Używamy | Zamiast | Uwagi |
|---|---|---|
| wykonawca | usługodawca, Wykonawca, fachowiec (w produkcie) | „fachowiec” zostaje w komunikacji marketingowej |
| klient | szukający usługi, zleceniodawca | w liczbie mnogiej: klienci |
| opinia | ocena lub komentarz (dla całości) | opinia to ocena, komentarz i zdjęcia |
| ocena | gwiazdki, nota | od 1 do 5, zawsze z opisem słownym |
| współpraca | praca wykonawcy, wykonawca | przedmiot oceny we wszystkich kanałach |
| odpowiedź wykonawcy | komentarz (pod opinią) | zamiast „Dodaj komentarz” na profilu |
| Opublikuj opinię | ZAPISZ | czasownik opisuje skutek |