Vă prezentăm Instapage 3.0: mai inteligent, mai rapid, mai îndrăzneț și pur și simplu mai bun.

Echipa Instapage a făcut o treabă remarcabilă construindu-ne interfața de utilizare de-a lungul multor ani. Cu toate acestea, am observat că nu mai servește nevoilor utilizatorilor noștri și era timpul pentru o schimbare.

Przemek Cholewa, liderul sistemului de proiectare Instapage, prezintă gândirea echipei în timpul acestui proces de actualizare a interfeței cu utilizatorul:

Știam că trebuie să se întâmple o schimbare a percepției pentru a include productivitatea și performanța, păstrând totuși totul ușor de utilizat. Echipa noastră a înțeles modul în care interfața de utilizare poate fie să distragă atenția, fie să ajute utilizatorul să își atingă obiectivul. Formularul trebuie să urmeze funcția, nu invers. Am vrut ca sistemul de proiectare Instapage să fie mai puțin atrăgător și mai minimalist și funcțional.

Din punct de vedere istoric, nu am avut luxul de timp, resurse și cunoștințe pentru a implementa corect un sistem de proiectare sofisticat. Acum o facem și astăzi evidențiem cele mai mari îmbunătățiri din partea echipei din spatele tuturor.

(Notă: aceasta nu este evoluția finală a interfeței de utilizare și vă puteți aștepta la multe actualizări în următoarele câteva săptămâni.)

Dezactivarea interfeței de utilizare Instapage

La Instapage, credem în designul iterativ și că lucrul la design nu se face niciodată - este în continuă evoluție. Primul nostru kit de interfață a fost inspirat de designul materialelor și ne-a servit bine produsul, dar ne-am dat seama de-a lungul timpului că kitul inițial de interfață nu avea toate componentele de care aveam nevoie și era prea limitativ pentru ceea ce Instapage construia.

Ceea ce vedeți astăzi cu noua interfață de utilizare Instapage este o frumoasă poveste de design iterativ în efortul nostru de a oferi o experiență de utilizare mereu îmbunătățită. A început prin a lua implementarea noastră de proiectare a materialelor și a evolua la un sistem de proiectare tranzitoriu (și temporar). Am numit-o „ Cristal ”, deoarece intenționa să ofere mai multă claritate.

Crystal a avut ca scop adaptarea designului materialului la nevoile Instapage fără a schimba prea mult limbajul de proiectare. A abordat provocarea principală - au toate elementele de proiectare de care avem nevoie disponibile, documentate și având un fragment de cod unghiular. Am început lucrările la mijlocul anului 2019 și am terminat la sfârșitul anului trecut, tocmai pentru a începe să lucrăm la ultimul pas - propriul limbaj vizual numit „ Crystal Clear ”.

Crystal Clear este ultimul nostru pas al tranziției, este propria noastră interfață de utilizare și propriul limbaj vizual, adaptat nevoilor Instapage, elaborat cu atenție cu detaliile de care avem nevoie.

Directorul de design, Uldis Leiterts, explică:

Ca proces iterativ, munca nu se face niciodată. Încă reparăm, îmbunătățim și actualizăm. De exemplu, unele părți ale grilei încă mai au nevoie de ceva lucru. Dar, în loc să ținem lucrurile sub capotă, am vrut să ne împărtășim munca, deoarece atât de mult cât suntem mândri de versiunea noastră „finală” anticipată, suntem mândri și de natura iterativă a designului și de modul în care servește funcția.

Sperăm că prima versiune a Crystal Clear și actualizările ulterioare vor îmbunătăți continuu experiența clienților noștri cu Instapage, un produs pe care îl adorăm să creăm.

Ce este nou cu interfața de utilizare Instapage?

În general, am dezactivat întreaga interfață cu utilizatorul, astfel încât conținutul clientului să fie văzut mai întâi, așa cum veți vedea mai jos.

Copiere UX

Împreună cu designul de tranziție Crystal, am introdus un scriitor UX echipei noastre de design talentate. Instapage a fost construit de ingineri, la fel și copia pe care ați văzut-o. Ne-a servit bine, dar a lăsat și spațiu pentru îmbunătățiri.

De exemplu, un mesaj în stare goală spunea „Tabloul dvs. de bord este singuratic” - în sine nimic greșit, dar este posibil să nu fie cel mai bun limbaj potrivit pentru software-ul de afaceri serios pe care îl vedem noi înșine. Cu Crystal Clear, UX / Content Writer al Instapage, Mateusz Sochoń, a stabilit mai multă coerență cu tonul și mesajul. După cum spune Mateusz:

Am făcut ca toate stările goale și comunicarea direcționată de utilizator să se simtă coezive prin eliminarea tuturor denivelărilor. Am modificat copia ori de câte ori a existat spațiu de îmbunătățire legat strict de sintaxă sau tonul de mesagerie.

Stil și culori noi

Pentru a găsi un stil de interfață echilibrat care mărește productivitatea utilizatorului, ne-am actualizat paleta de culori și stilul la tonul neutru, în tonuri de gri. Noua paletă de culori este mai puțin decorativă, dar mult mai funcțională. De exemplu, albastrul regal este rezervat doar acțiunii, în principal butoanele CTA:

Acestea fiind spuse, un design bun este invizibil, iar echipa s-a inspirat de la Dieter Rams, care a creat regulile pentru un design bun. Din principiile lui Rams, echipa a actualizat interfața pentru a fi mai atemporală.

Înainte: Cristal

Curent: Crystal Clear

Ierarhie de niveluri noi și eliminarea umbrelor

Noua Convenție privind nivelurile ne permite să introducem ideea ierarhiei componentelor și elementelor în interfața de utilizare într-un mod mai intenționat și organizat. Diferite componente găsite în sistemul Crystal Design sunt afișate la diferite niveluri pentru a evidenția unele elemente și a le grupa în grupuri de context coezive vizual.

În cadrul aplicației noastre există patru niveluri principale:

• Nivelul 0: servește drept fundal pentru tot conținutul rămas
• Nivelul 1: nivelul în care sunt afișate majoritatea componentelor
• Nivelul 2: permite derularea elementelor de la nivelurile inferioare sub acesta
• Nivelul 3: un element de suprapunere afișat pe toate nivelurile inferioare

(Notă: Nivelul intermediar 1.5 este nivelul care conține toate componentele care sunt afișate pe o parte a unui nivel 1, 2 sau 3, dar care se vor ascunde totuși sub un nivel superior. Astfel de componente includ sfaturi de instrumente, pop-up-uri, drop-down-uri. Noua actualizare elimină umbra din starea intermediară. Este mai deschisă și vizuală, indiferent de nivelul pe care este plasat.)

În plus, am aflat că unul dintre factorii care menține interfața curată este utilizarea minimă a umbrelor. Designul materialelor folosește în mod istoric umbre pentru decor, în timp ce Instapage folosește umbre pentru a separa nivelurile majore, cum ar fi suprapunerea:

Iconografie coerentă, conturată

De-a lungul aplicației, veți observa iconografie în meniuri, meniuri drop-down, etc. Noua iconografie este mai curată și mai simplă:

O grilă de distanțare diferită

În spatele fiecărei interfețe se află o bază solidă, atât structură, cât și grilă. A fost necesară îmbunătățirea unei noi rețele structurale și, cu Crystal Clear, interfața are mai mult spațiu pentru a respira și îi ajută pe utilizatori să scaneze mai ușor:

Eliminarea colțurilor rotunjite

Această actualizare este mai subtilă, dar merită subliniată, deoarece echipa de design consideră că eliminarea colțurilor rotunjite este mai avansată:

UI Builder

Puteți vedea cum este implementată noua actualizare Crystal Clear în constructor. Observați paleta în tonuri de gri, cu excepția imaginilor, butoanelor CTA și siglelor:

Ce am învățat

Șeful Dezvoltării UI, Łukasz Grądzki, subliniază modul în care echipa și tehnologia s-au îmbunătățit. În plus, modul în care investiția realizată în 2016 a dat roade acum:

În ultimii patru ani, ne-am transformat din a fi o componentă comună slab adunată în ceva pe care astăzi îl putem numi un sistem de design complet. Un sistem care este partajat în toate produsele și instrumentele noastre interne.

Pentru referință, în 2016, am rescris întreaga aplicație pe partea frontend și am implementat prima versiune a kitului UI. A durat mai mult de trei luni pentru a finaliza sarcina și a implicat aproximativ o duzină de membri ai echipei. De asemenea, merită menționat faptul că aplicația în sine a fost relativ mică în comparație cu zilele noastre. Acum, am reușit să implementăm o reproiectare completă a aplicației Instapage fără probleme majore într-un singur ciclu de dezvoltare.

Consultați noua interfață pentru dvs.

Noul sistem de design Crystal Clear vă oferă claritate asupra a ceea ce contează cel mai mult - esența motivului pentru care utilizați aplicația Instapage. Vrem să vă împuternicim să vă concentrați asupra sarcinii, asupra utilizării zilnice a Instapage.

Suntem bucuroși să aflăm de la dvs. dacă aveți sugestii cu privire la modul în care ne putem îmbunătăți sau feedback prin intermediul noii noastre interfețe. Conectați-vă aici pentru a o experimenta personal și verificați pozițiile noastre deschise dacă sunteți interesat să vă alăturați echipei.