Czas na pierwsze zadanie w 2023! I czas podnieść trochę poprzeczkę. W tym i kolejnych zadaniach nie będziemy pracować wyłącznie nad statyczną warstwą graficzną, ale częścią zadania będzie również tworzenie prostych prototypów.
Umiejętność prototypowania, nawet tworzenia tych najprostszych interakcji w naszych projektach, przydaje się nie tylko na potrzeby testów użyteczności, ale również prezentacji projektów w zespole. Ruch, animacja – to cała osobna działka projektowania i może wzbogacić nasz projekt, jak i go zepsuć.
Jak dodać ruch do projektu? Na dwa sposoby – dodając warstwę interakcji w programie do projektowania UI (jeśli macie taką możliwość – np. w Figmie albo Adobe XD). Ale można też skorzystać z aplikacji do prototypowania takich jak ProtoPie czy Axure. O ProtoPie niebawem opowiem trochę więcej – teraz skupmy się na zadaniu.
Co to jest wyzwanie UI?
No dobra, ale o co chodzi w tym wyzwaniu. Treść zadania możecie wykorzystać jako inspirację do nowego projektu do portfolio, formę ćwiczenia lub wziąć udział w wyzwaniu, zrealizować zadanie i wysłać je do mnie w określonym terminie. Ja w niedługim czasie przygotowuję spotkanie online na kanale YouTube (by Zebza), gdzie omawiam wybrane projekty – czyli robimy sobie spotkanie w formie korekty.
Z nadesłanych projektów wybieram kilka. Pozwoli to pokazać lepsze i słabsze projekty, omówić dobre strony i popularne błędy. A przede wszystkim – będę mogła opowiedzieć wam więcej o dobrych praktykach i wzorcach. Dzięki temu, spotkania będą krótsze i bogatsze w wiedzę. Wszyscy uczestnicy dostaną także krótki feedback do projektu na maila (po publikacji naszego podsumowania na YouTube). Jeżeli jesteście ciekawi jak wyglądało takie spotkanie online ostatnio, to zerknijcie na Idź Pan w UI! #27
Jak dołączyć do wyzwania UI?
W pierwszej kolejności – wykonajcie zadanie ?
A potem po prostu podeślijcie do mnie efekty. Jak? Przez maila* – byzebza@gmail.com w Tytule wpisując „Idź Pan w UI! #28″! Możecie dodać krótki opis (niewymagany), natomiast obowiązkowo trzeba umieścić link do interaktywnego projektu. Narzędzia do projektowania UI i prototypowania pozwalają na wygenerowanie linku do projektu – i właśnie taki link trzeba zamieścić w mailu. Upewnijcie się proszę, że link jest dostępny dla innych osób (nie tylko dla was). Często zdarza się niestety, że wysyłacie mi linki projektów, do których nie mogę zerknąć.
Po zakończeniu zadania, na podanego maila daję też znać o nadchodzącym spotkaniu na żywo, gdzie podsumowuję wyzwanie.
Treść zadania UI
Temat: System do zarządzania biznesem – panel z klientami
Deadline: 30 stycznia 2023 (do końca dnia)
Format: projekt na szerokość ekranu 1440 px
Cel zadania: Stworzenie projektu panelu do zarządzania klientami, znajdującego się w większym systemie, pomagającym w zarządzaniu biznesem (księgowości, fakturowaniu itd.). Panel klientów to miejsce, gdzie przechowywane są informacje kontaktowe oraz dane służące do wystawiania faktur (nie trzeba ich każdorazowo wpisywać z palca jeśli regularnie wystawiamy faktury jakiejś firmie).
Obowiązkowe widoki i ich elementy: Do zaprojektowania się minimum dwa ekrany w tym dwa stany jednego z nich:
- widok listy klientów
- widok dodawania nowego klienta i ten sam widok z wypełnionymi danymi
Na widok listy klientów powinna składać się, no cóż, lista ? Elementami listy powinny być minimum: skrócona nazwa, pełna nazwa, adres, adres email. Warto wziąć pod uwagę, że klientów może być sporo i powinniście przewidzieć jakieś funkcje, które pozwolą szybko wyszukać konkretnego klienta.
Dodatkowo w zadaniu trzeba zaprojektować możliwość dodawania nowego klienta. Informacje, które można tu dodać to nazwa firma (wraz ze skróconą nazwą, która pomoże nam szybciej wyszukać firmę), numer NIP, adres i adres korespondencyjny. Do tego dodatkowe dane kontaktowe (numery telefonów, adresy email, w tym email do wysyłania faktur). Warto przewidzieć miejsce na dodatkowe notatki. Klientowi można przypisać również numer konta i nazwę banku.
Kolejna rzecz to zaprojektowanie stanów tego widoku – pustego, przed wpisaniem danych i po wpisaniu danych. To minimum, które również powinniście przedstawić w formie prototypu. Oznacza to, że minimalną interakcją powinno być przeklikanie się przez ekrany – przejrzenie listy klientów, dodanie nowego klienta, powrót na zaktualizowaną o klienta listę. Zachęcam jednak do większej zabawy i zastanawienia się nad ruchem komponentów i dodaniem interakcji np. do pól formularzy. To jak działają formularze, gdy zacznie się je uzupełniać, potrafi otworzyć oczy na to, jakie komponenty ostatecznie wybieramy ?
Oprócz tego powinna pojawić się globalna nawigacja, która pozwala poruszać się między innymi częściami aplikacji. Zakładkami będą: Pulpit, Panel klientów, Księgowość, Pracownicy, Kalendarz. Opcja przełączenia się między biznesami (w systemie można prowadzić więcej niż jedną firmę), opcja wylogowania się i zmiany ustawień. Zaplanujcie również miejsce, gdzie będzie można znaleźć pomoc.
Branding: Zostawiam wam tutaj pełną dowolność. Pamiętajcie, że system do narzędzie do prowadzenia biznesu – a nie coś, z czego korzystamy w celach rozrywkowych ? To powinno przełożyć się również na warstwę wizualną.
Interfejs można przygotować w j. angielskim!
Jak być na bieżąco?
Żeby być na bieżąco z kolejnymi zadaniami i informacjami o spotkaniach na żywo, najwygodniej dopisać się do newslettera, bo dzięki temu, prosto na maila dostaniecie każdą informację. Można po prostu śledzić bloga albo moje kanały na portalach społecznościowych, ale algorytmy bywają okrutne i jest szansa, że nie zawsze wyświetlą się wam powiadomienia o nowym zadaniu. Newsletter ten problem eliminuje. Zapisz się do newslettera tutaj.
* Wyrażacie tym samym zgodę na przetwarzanie swoich danych osobowych, w celu realizacji zadania Idź Pan w UI #28 – do kontaktu w temacie zadania oraz publikacji projektu w podsumowaniu na żywo.
