Всички сме се натъквали на уебсайтове и приложения, които ни карат да крещим и да хвърляме устройствата си из цялата стая. Не мисля, че съм само аз. Добрият потребителски интерфейс, на най-основното си ниво, позволява на потребителите да изпълняват работата, за която са дошли на уебсайта, с лекота и без объркване.
Страхотните дизайнери на потребителски интерфейс правят всичко това и повече. Потребителските интерфейси, които са наистина забележителни, не само ще зарадват потребителя, като улеснят извършването на текущата работа, но също така ще го зарадват визуално и изживяващо.
Това може да означава всичко – от елегантно, иновативно анимационно взаимодействие, което инстинктивно привлича вниманието на потребителя към конкретна функция, до чист, изчистен дизайн и интелигентно използване на бялото пространство, което вдъхва усещане за мир у потребителя, за да назовем няколко примера.
С малко съдействие от Nielsen Norman Group, ще се заема с темата “Какво представлява добър потребителски интерфейс?” в тази публикация, преди това ще покажа осем примера за изключителен дизайн на потребителския интерфейс на уебсайта и обосновка за моето решение. Изберете пример от падащото меню, за да стигнете до него, или продължете да четете.
И така, как оценявате дали потребителският интерфейс е добър или дори страхотен? Можете да разберете дали потребителският интерфейс е естетически красив, като го погледнете, и можете ли също да го използвате, за да видите дали е интуитивно и лесно изживяване, като го погледнете. Има ли обаче нещо по-обективно? Става ли по-формализиран?
Как можете да разберете дали дизайнът на потребителския интерфейс на уебсайта е добър?
Лично аз винаги се връщам към критериите за използваемост на Nielsen Norman Group.
Обучаемостта, ефективността, запомняемостта, грешките и удовлетвореността са петте качества, които Nielsen използва, за да характеризира използваемостта.
Възможност за обучение: В състояние ли е потребителят да изпълнява своите задачи с лекота?
Ефективност: В състояние ли е потребителят да изпълнява задачи навреме заради интерфейса?
Запомняемост: Колко вероятно е човек да си спомни как да използва уебсайта следващия път, когато го посети?
Грешки: Какви действия предприема интерфейсът, за да намали вероятността от грешка на потребителя и как позволява на потребителите да коригират грешките си?
Удовлетворение: Потребителят доволен ли е от начина, по който дизайнът взаимодейства с тях?
Отличен потребителски интерфейс трябва също да представлява образа на марката, за да се откроява от конкурентите и да дава на клиентите приятно изживяване. Нека да разгледаме няколко примера, в които вярвам, че организациите са уцелили дизайна на потребителския интерфейс на уебсайта си.
1. Medium
Medium, платформа за четене и писане онлайн, е колкото красива, толкова и полезна. Този уебсайт прави всичко по правилния начин като залага на ограничено използване на цветове, достатъчно разстояние между редовете и добре подбран шрифт.
Съдържанието преобладава в Medium. Когато потребител влезе, в горната част на списъка със статии се показва поле с надпис „Пишете тук“, което позволява и насърчава всеки да започне да пише веднага. Потребителите получават почти празна бяла страница, когато щракнат върху връзката „Напишете история“, намалявайки безпорядъка и просто предлагайки ясно място, където да се концентрират върху писането.
Статиите са изложени в стил с една колона, което го прави лесни за четене. Medium всъщност дава на читателите отлично и безпроблемно изживяване при публикуване, с малки подробности, като прогнозно време за четене и възможност да подчертават и коментират директно определени статии.
2. Virgin America
Когато ставаше дума за подпомагане на потребителите при процеса на резервация на полети, Virgin America беше една от първите – ако не и първата – която даде приоритет на нуждите на потребителя. Резервирането на полет е мъка за повечето хора. Уебсайтът на Virgin America премахна интерфейса им, за да привлече вниманието към най-важния въпрос: „Къде бихте искали да отидете?“ Точно както съдомиялната машина ни освобождава от необходимостта да мием чиниите, сайтът на Virgin America премахна интерфейса им, за да привлече вниманието към най-важния въпрос: „Къде бихте искали да отидете?“ Потребителят може да започне процеса на резервация веднага, като изтрие всички заобикалящи материали.
И въпреки че сега сайтът може да изглежда малко стар, той заслужава да бъде включен в нашия списък като пионер в дизайна на интерфейс, ориентиран към потребителя. За съжаление, след колаборацията с Alaska Airlines, техният потребителски интерфейс стана много по-затрупан.
Но нека се върнем към това, което направи уебсайта на Virgin America толкова страхотен: на потребителя му беше припомнено за решението ми през целия процес на резервация чрез лента в горната част на страницата, която показваше текущите им опции. Virgin улесни потребителите да преглеждат и променят избора си, като поддържат тази информация налична, вместо да разчитат на тях самите да запомнят информацията. Потребителският интерфейс е изрично предназначен да позволи на потребителите да се концентрират върху постигането на целта си възможно най-бързо и ефективно.
Virgin също положи съзнателни усилия да се отличи естетически от тълпата. Ярки цветове, градиенти и забавни изображения помогнаха за установяване на отделна идентичност на марката и изживяване, което ги отличава от уебсайтовете на техните конкуренти.
3. Airbnb
Дизайнът на потребителския интерфейс на уебсайта на Airbnb се отличава с две неща: резервиране на стая и установяване на доверие между двама напълно непознати.
Прекрасен дизайн на потребителски интерфейс за начална страница може да бъде намерен в Airbnb.
Airbnb, подобно на Virgin America, е дал предимство на улесняването на резервирането на престой директно от началния екран. Потребителят е навременно и учтиво посрещнат и насочен да започне да организира престоя си, благодарение на уникалната му употреба на разговорен език, като например „Какво можем да ти помогнем да намериш, Едуард?“ по-долу и полезен текст за реплика.
Тази разговорна покана да започнете да търсите е прекрасен метод за изразяване на гласа на марката, като същевременно опростява процеса на намиране на място за престой. По време на това първо търсене единствените полета, които ще трябва да попълните, са предпочитаната дестинация на потребителя, както и продължителността на престоя им и броя на гостите. Процедурата е опростена, приятна и достъпна чрез отлагане на допълнителните филтри за следващата фаза.
Всички допълнителни разходи, които могат да бъдат свързани, са описани подробно на страниците с обяви. За почти всеки потребител това е доста проста и основна процедура. Бутонът „Заявка за резервация“ се намира точно под него и, като един от най-ярките бутони на уебсайта, приканва потребителите да щракнат върху него, за да завършат своята резервация.
Потребителят се изпраща на нова страница за плащане, след като поиска да резервира място. За да се намали необходимостта посетителите да запомнят информацията от предишната страница, информацията за обявата, цената и резервацията се намират вдясно на страницата.
Вместо да отидете направо към плащането, страницата вляво ви инструктира да „кажете здравей на вашия хост и да им кажете защо го посещавате“. Чрез представяне на тази информация преди информацията за плащане, тя инициира дискусия и установява връзка между посетителя и домакина, както и допълнително ангажиране на потребителя в изживяването. Airbnb се гордее с това, че обединява хората и дава приоритет на диалога пред транзакцията – и потребителският интерфейс отразява това чудесно.
Текстът на Airbnb е внимателно изработен и са използвани завладяващи снимки и видеоклипове, за да се гарантира, че интерфейсът има емоционален тон, който подпомага формирането на доверие между непознати.
4. Bestboards
Това е дизайн на потребителски интерфейс на уебсайт с характер. Потребителите са добре дошли с вълнуващо, забавно, динамично видео на продукта в действие веднага щом пристигнат. Вие сте очаровани от уникален скейтборд в неговото собствено пътуване, усукване и завъртане, умножаване и след това разтваряне в съставните му компоненти — това е доста каране. След това виждате подканващата фраза „Пазарувайте сега“ в средата на екрана си, която нетърпеливо чака да щракнете.
Вие сте изумени, любопитни и е време да разберете какво се крие зад цялата тази увереност. Когато щракнете върху „Пазарувайте сега“, интерфейсът е лишен от всякакви цветове, с изключение на брилянтните оранжеви колела на дъската и ви се представят само най-важните подробности: картина, максимална скорост, обхват, цена, време за доставка и, разбира се, „Купете сега“. Какво те задържа? Няма много.
Все още не сте убедени? Когато щракнете върху „Научете повече“, ще получите цялата информация, която ви е необходима, за да преминете от съзерцание към осъзнаване: изображения, текст и визуални компоненти, които се поддържат взаимно, са ефективно разделени на ключови продуктови аспекти. Положителните оценки на продуктите и опциите за финансиране намаляват тревожността, като намаляват усещането за опасност, докато превъртате надолу. Като цяло, това е отличен пример за това как да комбинирате различни визуални и текстови части, за да създадете сплотено цяло.
5. Dropbox
Dropbox е един от най-удобните за потребителя интерфейси. Всеки, който някога е използвал компютър, е запознат със системата за организация на папки и файлове. Няма много неща, които обикновеният потребител да не знае как да постигне веднага по отношение на усвояемостта. Тъй като това е толкова често, повечето хора ще се опитват да плъзгат и пускат файлове от настолните си компютри към уебсайта, без дори да разберат дали е възможно или не.
Приветливото поведение на Dropbox, което се предава чрез забавни графики, кара потребителя да се чувства спокойно, докато използва софтуера. Това подобрение на потребителския интерфейс прави продукта да изглежда като стар приятел, нетърпелив да помогне на потребителите с техните нужди от споделяне на файлове.
Те също така имат дизайн на блог, който е може би най-великият в света в момента. Разбирам, че подобно твърдение има добра доза субективност, но рядко съм виждал толкова успешен баланс между експериментален потребителски интерфейс, използваемост и мултимедийно съдържание на едно място.
Той успява да се окаже експериментален, иновативен и последователен, с подредени цветови палитри и динамични икони и отлични произведения на изкуството, които са синхронизирани с всички други прекрасни рисунки. Това е голямо постижение! Погледни!
Има различни онлайн генератори на цветови палитри, които можете да проверите, ако имате нужда от помощ, за да измислите отлична цветова палитра. Просто се уверете, че избягвате някои от най-типичните грешки в цветовата палитра, направени от дизайнерите на потребителски интерфейс.
6. Pitch
Pitch, мобилен и онлайн инструмент, който ви позволява да създавате и управлявате зашеметяващи презентации, е стартираща технология, основана на дизайна. Те имат за цел да ви убедят, че могат да направят за презентации това, което Slack е постигнал за комуникациите. Те също са много добри в това.
От момента, в който посетите тяхната уеб страница, можете да видите, че всеки един аспект е внимателно обмислен. Разгледайте слогана. „Всички ръце на палубата“ е гъвкава фраза, която напомня както за духа на сътрудничеството – основен аспект на Pitch – така и за технобъблото на „срещите за всички ръце“. И накрая, думата „палуба“ е игра на думата „презентация“. Който го е измислил, заслужава златна звезда!
Дизайнерите на потребителски интерфейс на Pitch изпълняват отлична работа, като насочват потребителя чрез пример за това какво би било пътуването им, ако наистина използваха приложението. Те са постигнали фантастичен микс между чисто и задълбочено, минимизиране на претрупването, като същевременно гарантират, че най-важните елементи на продукта са покрити, което позволява на сайта наистина да изчезне.
С широкото използване на изображения, сайтът им насочва към модерните тенденции в дизайна, но се отклонява от плоския, анимационен дизайн на героите, който виждате на толкова много сайтове в наши дни. Използването на 3D дизайн на герои, подобно на Pixar, е рядкост на този пазар и следователно е лесно разпознаваемо – покажете ми ръка на Pitch утре и се обзалагам, че ще си спомните фирмата.
Предимствата на дизайна на потребителския интерфейс на уебсайта им не свършват дотук. Те също така включват някои умни, фини динамични компоненти и анимации, които помагат на потребителя да премине от едно превъртане към друго. Те нежно привличат вниманието ви отдясно наляво, а забавеният старт на анимациите ви приканва да спрете на всяка функция на продукта и да се възползвате. Ще почувствате леко познаване, забавление и професионализъм, а представянето на презентации вече няма да е скучна работа!
7. Frank and Oak
Frank and Oak, компания за дрехи със силен акцент върху медиите и начина на живот, използва своя потребителски интерфейс, за да привлече вниманието и предпочитанията на своите потребители за стил. Докато онлайн пазаруването е доста лесно от гледна точка на UX, фирмата комбинира силни снимки и ясен текст без засечки, за да предаде личността на марката и нейната целева демографска група. Въпреки някои силни маркетингови съобщения, насочени към продажбите – 20% намаление в целия сайт – имиджът на марката им е здраво издълбан от първата точка на допир на компанията. Готино е, чисто е и е отблизо и лично.
Страницата на продукта е центрирана върху два елемента след щракване върху артикул: фотографията на продукта и бутона с призив за действие, тъй като това са единствените цветни компоненти на страницата. Бутонът „Добавяне в количката“ няма да работи, докато не бъде избран размер, което е прекрасно докосване. Когато потребителят се опита първо да натисне бутона, цветът избледнява и текстът се променя на „Изберете своя размер“.
Попълването на лична информация за първи път по време на процеса на плащане никога не е приятно изживяване. Това неизбежно е тромава процедура – или най-малкото никой не е измислил как да улесни купувачите на жилище за първи път. Франк и Оук, от друга страна, вършат отлична работа за подпомагане на потребителите, като разделят формуляра на по-малки части от полета за въвеждане, намалявайки когнитивната тежест за потребителите. Да, подредено е и не е претрупано.
Вероятно сте разбрали, че те са едни от най-критичните ми изисквания за успешен дизайн на потребителския интерфейс.
Като цяло, голяма част от основния потребителски интерфейс – и определено UX – на Frank и Oak може да се намери на много други уебсайтове, но това е начинът, по който те комбинират логично, лесно потребителско изживяване, силен, мощен и чист потребителски интерфейс и стегнат, амбициозен имидж и послание на марката, които го отличават.
Предполагам, че това е изводът от седмия сайт в списъка: красивият потребителски интерфейс може да бъде страхотен само ако е придружен от силен UX и добре обмислено, уверено послание.
О, и споменах ли техния фантастичен блог – или списание? Те определено са усвоили изкуството да създават медийно и лайфстайл ръка на компанията, стигайки дотам да създадат списание във вестникарски стил, което отдава почит на формите на вестникарски вестници, като същевременно използва модерни, смели, изрязани и поставени произведения на изкуството. Фантастично е!
8. Semplice Labs
Semplice Labs, портфолио на WordPress, направено от знаменития дизайнер Тобиас Ван Шнайдер, който е проектирал за Spotify, BMW, Google и дори NASA, е един от любимите ми примери на красив и полезен потребителски интерфейс. Меко казано, той знае какво прави.
Съдържанието тук наистина се харесва на читателите, като ги насърчава да научат повече за Semplice на силен, уверен език. Останалата част от потребителския интерфейс на уебсайта е илюстрация на това, което потребителите на продукти могат да правят със собствените си уебсайтове. Потребителите ще запомнят и харесват този интерфейс поради плавните анимации и безпроблемните преходи между страниците.
Заключение
Това са само шепа от любимите ми примери за дизайн на потребителски интерфейс на уебсайтове. Създаването на функционален потребителски интерфейс без триене е важен аспект за установяване на добри взаимоотношения с потребителя, да не говорим, че е проектиран с мисъл за потребителя. За да създадете продукт, който осигурява възможно най-доброто потребителско изживяване, най-добре е да се обърнете към указанията за използваемост на Nielsen, когато проектирате или оценявате интерфейс.
