Przedstawiamy Instapage 3.0: mądrzejszy, szybszy, odważniejszy i po prostu lepszy.

Zespół Instapage wykonał znakomitą pracę, budując nasz interfejs użytkownika przez wiele lat. Zauważyliśmy jednak, że nie służy już potrzebom naszych użytkowników i nadszedł czas na zmianę.

Przemek Cholewa, Instapage Design System Lead, przedstawia sposób myślenia zespołu podczas tego procesu aktualizacji interfejsu użytkownika:

Wiedzieliśmy, że musi nastąpić zmiana percepcji, aby objąć produktywność i wydajność, a jednocześnie zachować wszystko, co jest łatwe w użyciu. Nasz zespół zrozumiał, w jaki sposób interfejs użytkownika może rozpraszać lub pomagać użytkownikowi w osiągnięciu celu. Forma powinna podążać za funkcją, a nie odwrotnie. Chcieliśmy, aby Instapage Design System był mniej efektowny, a bardziej minimalistyczny i funkcjonalny.

Historycznie nie mieliśmy luksusu czasu, zasobów i wiedzy, aby właściwie wdrożyć wyrafinowany system projektowania. Teraz to robimy i dzisiaj podkreślamy największe ulepszenia zespołu, który za tym wszystkim stoi.

(Uwaga: nie jest to ostateczna ewolucja interfejsu użytkownika i możesz spodziewać się wielu aktualizacji w ciągu najbliższych kilku tygodni.)

Usuwanie szumów interfejsu użytkownika Instapage

W Instapage wierzymy w projektowanie iteracyjne i że praca nad projektem nigdy się nie kończy — cały czas się rozwija. Nasz pierwszy zestaw interfejsu użytkownika był zainspirowany Material Design i dobrze służył naszemu produktowi, ale z czasem zdaliśmy sobie sprawę, że początkowy zestaw interfejsu użytkownika nie zawierał wszystkich potrzebnych nam komponentów i był zbyt ograniczający w stosunku do tego, co tworzył Instapage.

To, co widzisz dzisiaj dzięki nowemu interfejsowi użytkownika Instapage, to piękna historia iteracyjnego projektowania w naszych staraniach, aby zapewnić zawsze lepsze wrażenia użytkownika. Zaczęło się od wdrożenia Material Design i przekształcenia go w przejściowy (i tymczasowy) system projektowania. Nazwaliśmy go „ Kryształem ”, ponieważ miał zapewnić większą przejrzystość.

Celem Crystal było dostosowanie Material Design do potrzeb Instapage bez zbytniej zmiany języka projektowania. Rozwiązanie to rozwiązało główne wyzwanie — wszystkie potrzebne nam elementy projektu były dostępne, udokumentowane i miały fragment kodu Angulara. Prace rozpoczęliśmy w połowie 2019 roku, a zakończyliśmy pod koniec zeszłego roku, aby rozpocząć pracę nad ostatnim krokiem – naszym własnym językiem wizualnym o nazwie „ Crystal Clear ”.

Crystal Clear to nasz ostatni etap przejścia, to nasz własny interfejs użytkownika i nasz własny język wizualny, dostosowany do potrzeb Instapage, starannie dopracowany z niezbędnymi szczegółami.

Chief Design Officer, Uldis Leiterts, wyjaśnia:

Jako proces iteracyjny praca nigdy się nie kończy. Nadal naprawiamy, ulepszamy i aktualizujemy. Na przykład niektóre części siatki nadal wymagają trochę pracy. Ale zamiast trzymać rzeczy pod maską, chcieliśmy podzielić się naszą pracą, ponieważ tak samo jak jesteśmy dumni z naszej oczekiwanej „ostatecznej” wersji, jesteśmy również dumni z iteracyjnego charakteru projektu i tego, jak pełni on swoją funkcję.

Mamy nadzieję, że pierwsze wydanie Crystal Clear i kolejne aktualizacje będą stale poprawiać doświadczenia naszych klientów z Instapage, produktem, który uwielbiamy tworzyć.

Co nowego w interfejsie użytkownika Instapage?

Ogólnie rzecz biorąc, odszumiliśmy cały interfejs użytkownika, aby treść klienta była widoczna jako pierwsza, jak zobaczysz poniżej.

Kopia UX

Wraz z przejściowym projektem Crystal, wprowadziliśmy do naszego utalentowanego zespołu projektantów pisarza UX. Instapage został zbudowany przez inżynierów, podobnie jak kopia, którą widziałeś. Dobrze nam to służyło, ale też pozostawiało pole do poprawy.

Na przykład jedna wiadomość z pustym stanem mówi „Twój pulpit nawigacyjny jest samotny” — sama w sobie nic złego, ale może nie jest to najlepszy język odpowiedni dla poważnego oprogramowania biznesowego, które sami widzimy. Dzięki Crystal Clear, UX/Content Writer na Instapage, Mateusz Sochoń, ustanowił większą spójność tonu i przekazu. Jak ujmuje to Mateusz:

Sprawiliśmy, że wszystkie puste stany i komunikacja skierowana do użytkownika były spójne, usuwając wszystkie nierówności. Modyfikowaliśmy kopię, ilekroć było miejsce na ulepszenia, które były ściśle związane ze składnią lub tonem wiadomości.

Nowy styl i kolory

Aby znaleźć zrównoważony styl interfejsu, który zwiększa produktywność użytkownika, zaktualizowaliśmy paletę kolorów i styl do neutralnego odcienia szarości. Nowa paleta kolorów jest mniej dekoracyjna, ale znacznie bardziej funkcjonalna. Dla przykładu, błękit królewski jest zarezerwowany tylko dla akcji, głównie przycisków CTA:

To powiedziawszy, dobry projekt jest niewidoczny, a zespół zainspirował się Dieterem Ramsem, który stworzył zasady dobrego projektowania. Zgodnie z zasadami Ramsa, zespół zaktualizował interfejs, aby był bardziej ponadczasowy.

Przed: Kryształ

Obecny: Krystalicznie czysty

Nowa hierarchia poziomów i usuwanie cieni

Nowa konwencja poziomów pozwala nam wprowadzić ideę hierarchii komponentów i elementów do interfejsu użytkownika w bardziej celowy i zorganizowany sposób. Różne komponenty znajdujące się w systemie Crystal Design są wyświetlane na różnych poziomach, aby wyróżnić niektóre elementy i pogrupować je w wizualnie spójne grupy kontekstowe.

W naszej aplikacji istnieją cztery główne poziomy:

• Poziom 0: służy jako tło dla wszystkich pozostałych treści
• Poziom 1: Poziom, na którym wyświetlana jest większość komponentów
• Poziom 2: Umożliwia przewijanie pod nim elementów z niższych poziomów
• Poziom 3: Element nakładki wyświetlany na wszystkich niższych poziomach

(Uwaga: Poziom Średniozaawansowany 1.5 to poziom zawierający wszystkie komponenty, które są wyświetlane nad częścią poziomu 1, 2 lub 3, ale nadal będą ukrywane pod wyższym poziomem. Takie komponenty obejmują podpowiedzi, popovery, listy rozwijane. Nowa aktualizacja usuwa cień ze stanu pośredniego. Jest lżejszy i spójny wizualnie niezależnie od poziomu, na którym zostanie umieszczony.)

Ponadto dowiedzieliśmy się, że jednym z czynników zapewniających czystość interfejsu użytkownika jest minimalne użycie cieni. Material Design historycznie używa cieni do dekoracji, podczas gdy Instapage używa cieni do oddzielania głównych poziomów, takich jak nakładka:

Spójna, zarysowana ikonografia

W całej aplikacji zauważysz ikonografię w menu, rozwijanych menu itp. Nowa ikonografia jest czystsza i prostsza:

Inna siatka odstępów

Za każdym interfejsem kryje się solidny fundament, zarówno struktura, jak i siatka. Ulepszenie nowej siatki struktury było konieczne, a dzięki Crystal Clear interfejs ma więcej miejsca do oddychania i ułatwia użytkownikom skanowanie:

Eliminacja zaokrąglonych rogów

Ta aktualizacja jest bardziej subtelna, ale warta podkreślenia, ponieważ zespół projektowy uważa, że ​​wyeliminowanie zaokrąglonych narożników jest bardziej nowatorskie:

Interfejs konstruktora

Możesz zobaczyć, jak nowa aktualizacja Crystal Clear została zaimplementowana w kreatorze. Zwróć uwagę na paletę skali szarości, z wyjątkiem obrazów, przycisków wezwania do działania i logo:

Czego się nauczyliśmy

Head of UI Development, Łukasz Grądzki, podkreśla, jak poprawił się zespół i technologia. Dodatkowo, jak inwestycja, którą poczyniliśmy w 2016 roku, opłaciła się teraz:

W ciągu ostatnich czterech lat przekształciliśmy się z luźno połączonych wspólnych komponentów w coś, co dziś możemy nazwać pełnowymiarowym systemem projektowania. System, który jest wspólny dla wszystkich naszych produktów i narzędzi wewnętrznych.

Dla porównania, w 2016 roku przepisaliśmy całą aplikację po stronie frontendowej i wdrażaliśmy pierwszą wersję UI Kit. Wykonanie zadania zajęło ponad trzy miesiące i zaangażowało około tuzina członków zespołu. Warto też wspomnieć, że sama aplikacja była stosunkowo niewielka w porównaniu do dnia dzisiejszego. Teraz byliśmy w stanie wdrożyć pełne przeprojektowanie aplikacji Instapage bez większych problemów w jednym cyklu rozwojowym.

Sprawdź nowy interfejs dla siebie

Nowy system projektowania Crystal Clear zapewnia przejrzystość tego, co najważniejsze — istoty, dlaczego korzystasz z aplikacji Instapage. Chcemy umożliwić Ci skupienie się na zadaniu, na codziennym korzystaniu z Instapage.

Z przyjemnością usłyszymy od Ciebie sugestie, jak możemy ulepszyć, lub opinie dotyczące naszego nowego interfejsu użytkownika. Zaloguj się tutaj, aby przekonać się o tym na własne oczy i sprawdź nasze wolne stanowiska, jeśli jesteś zainteresowany dołączeniem do zespołu.