10 болезнени потребителски интерфейса се провалят (и какво можете да научите от тях)

Добрият дизайн на потребителския интерфейс подобрява цялостното потребителско изживяване. Това прави взаимодействието на потребителя с приложение или сайт просто, интуитивно, ефективно и плавно, дотолкова, че когато работи добре, потребителят може дори да не забележи, че е там.

Много екипи оценяват очевидно безпроблемната простота на списъците на Trello за управление на техните тръбопроводи, феновете на фентъзи спортовете могат да потвърдят лесното усвояване на огромно количество информация в приложението ESPN Fantasy Sports и Артси Елегантните линии и цветните палитри правят страхотния дизайн на малко ръчно устройство да изглежда лесно.

Но когато се обърка, тогава хората наистина забелязват. Лошият потребителски интерфейс може да разубеди или директно да попречи на потребителите да продължат своя опит. Десетте блупъри по-долу, някои комични, някои просто досадни, могат да ни научат на нещо, дори ако това е точно това, което трябва да избягваме.



Трябва също да се отбележи, че Bad UI също често е свързан с липса на тестване - вижте нашия списък с най-добрите потребителско тестване софтуер за нашите любими инструменти за тестване.

01. Искате 120 яйца с това?

Изображение: чрез @odannyboy в Twitter

Изображение: чрез @odannyboy в Twitter

Фундаментално в дизайна на потребителския интерфейс е изборът на подходящия инструмент за работа, който обикновено трябва да означава спазване на съществуващите конвенции и използване на контролни елементи по начин, който потребителите вече са запознати. Така че може би тренирате като Роки Балбоа и наистина искате да добавите необикновен брой яйца към поръчката си, но квадратчета за отметка? Легендата изглежда забранява поръчването на 120 яйца, защото, разбира се, това би било нелепо, но фактът, че те трябваше да кажат, показва, че може би е използван грешен инструмент.

Ами ако ви кажа, че има по-добър начин да проектирате този потребителски интерфейс? pic.twitter.com/tvxeluJF9N 13 май 2019 г.

Полето за отметка се използва, когато можем да маркираме повече от една опция, а радиобутоните - когато е разрешен само един избор, макар че тук бутонът плюс и минус може да е работил по-добре. Така или иначе, ние сме още по-разочаровани, че няма отстъпка за поръчка на 15 яйца.

02. Променете вашия телефонен номер, за да използвате нашата услуга

Дизайнът на потребителския интерфейс се проваля: Уебсайт на Flyfair

Вземете нов номер [Изображение: flyflair.com]

Има случаи, когато може да искате да се погрижите само за потребители от един географски регион със свои специфични конвенции за форматиране, но уебсайтът на авиокомпания, работеща от няколко международни летища, вероятно не е един от тях. В този пример от Канада Flair Airlines , ако сте от държава, в която телефонните номера имат повече или по-малко от 10 цифри, не ви остава нищо друго освен да въведете фалшив номер. Въпреки че, тъй като няма поле за код на държава, те така или иначе няма да могат да ви се обадят.

Когато проектирате потребителски интерфейс за всичко, което ще има - или би могло да спечели - потребители от множество региони, уверете се, че използването не е ограничено от местните конвенции за именуване и номериране. Адаптирайте се към потребителите, вместо да ги принуждавате да се адаптират към вашия интерфейс.

03. Как се казва „смяна на езика“ на китайски?

Потребителският интерфейс е неуспешен: уебсайт на Mozilla

Уебсайтът на Mozilla на китайски [Изображение: Mozilla]

Така че влизате в мрежата по време на пътуване в чужбина и сте посрещнати от нещо като това . Къде гледате първо? Горе в дясно? Няма нищо там. Горе вляво? Не. Третото ви предположение може да ви накара да превъртите до долу в търсене на нещо, което прилича на падащо меню, и в този случай, там ще намерите опцията за език. Но като се има предвид, че промяната на езика е първото нещо, което ще искате да направите, ако се окажете на сайт, който не можете да прочетете, вероятно има смисъл да направите тази опция възможно най-лесна за намиране и идеално избираема преди да се наложи да извършите някакво друго действие, като например влизане в системата.

Икона на глобус или езиковата икона, проектирана от Farhat Datta може да помогне на хората да намерят опцията. Каквото и да правите, просто не използвайте флагове за представяне на езици освен ако не искате да разстроите страшно много хора.

04. Когато изясняването замъглява

@Homeburger това разбива мозъка ми; Махнете отметката, че няма маруля, за да премахнете марулята. pic.twitter.com/1Z3vt8lR1U 12 март 2019 г.

Всички сме напълно свикнали да маркираме квадратчета за добавяне на неща, а щракването върху квадратчетата, за да кажем, че не искаме нещата, по никакъв начин не е извън нас, така че на пръв поглед не би трябвало да има много място да объркаме това, но тук, Homeburger Опитът за обяснение на процеса просто ни озадачава. Трябва да махнете отметката от нещото, което не искате, за да не го получите? Пазете се от неясноти, но също така се пазете от опитите да го избегнете, които просто правят нещата по-сложни.

05. Можем ли да вместим нещо друго тук?

Потребителският интерфейс е неуспешен: iTunes

Затрупаният потребителски интерфейс на iTunes ще бъде пропуснат от малцина [Изображение: iTunes]

Няма нищо като претрупан интерфейс, който да накара потребителя да се почувства от самото начало, че го очаква болезнено изживяване и за съжаление няма недостиг на примери за големи играчи с прекалено зает дизайн на потребителския интерфейс, който боли очите и отнема твърде много време за навигация .

Малко хора оплакват смъртта на iTunes на Apple , докато много онлайн магазини с големи имена (включително Amazon) продължават да хвърлят всичко и кухнята потъва на витрината си по начин, който трудно улеснява навигацията. Дори приложението на теория на цветовете и разумното използване на контраста може малко да направи прекалено затрупания потребителски интерфейс да изглежда по-привлекателен, така че не забравяйте да го върнете обратно. Но не прекалявайте, има опасност и в другата крайност на абсолютния минимализъм. Опциите все още трябва да бъдат открити.

06. Смърт чрез падащо меню

Потребителският интерфейс е неуспешен: под

Това падащо меню, което кара всеки, който е по-малко от рицар, да се чувства неадекватно [Изображение: Boden]

Всички мразят падащите менюта, така че може би е странно, че някои дизайнери на потребителски интерфейс все още не са разбрали това. Що се отнася до попълването на онлайн формуляри, има няколко неща, които са по-разочароващи от това да се наложи да намерите вашата държава, ако тя е в дъното на списъка, или да изберете вашата година на раждане, вместо просто да я въведете, което просто изглежда перверзна форма на изтезания за млади или стари, и това, което е по-малко вероятно да попречи на някой да направи грешка.

Този пример от земя е най-малкото забавно, ако е малко дефлиращо за всеки, който няма изискано заглавие - няма опция за Mx, която забелязваме. Може би по-широкият урок в този пример е, че понякога трябва да спрете и да попитате, необходимо ли е това изобщо? Просто съжалявайте всички командири на крила там, които трябва да превъртат до края на списъка.

И ако искате да научите повече за проектирането на формуляри, вижте нашата публикация нататък 6 форми на модели и кога да ги използвате .

07. Чакане наоколо

Потребителският интерфейс е неуспешен: iFly50

IFly50.com на KLM изглежда много хубаво, но подценява търпението на читателя [Изображение: iFly50]

Анимацията и новите начини за взаимодействие бяха обявени като начин за създаване на възхитителни преживявания, но нека се уверим, че те не се превръщат в оправдание за дизайнерите да се покажат. Не забравяйте, че докато видът и усещането са важни, ядрото на страхотния потребителски интерфейс е функцията: Дори нещо толкова невинно като анимацията на бутоните „харесвам“ на Twitter е спечелило жизненост, че е досадно и детински, и докато игривата икона за зареждане може да предизвика усмивка за първи път , хората ще го мразят, ако трябва да го виждат твърде често.

Всяко ненужно взаимодействие, което създава триене при използването на потребителския интерфейс, може да бъде също толкова досадно. IFly50.com на KLM витрина от 50 туристически дестинации има страхотни изображения, но наистина ли ще задържи някой бутон за няколко секунди всеки път, когато иска да види повече информация? Избягвайте да добавяте триене, освен ако целта е да спрете потребителите да извършват действие.

08. Кажете какво?

Хей @teamweek, новият ти ментов цвят изглежда страхотно, но прави бутона ти нечетим с бял етикет. Изисква се коригиране на потребителския интерфейс! # използваемост pic.twitter.com/ih1n8no7s7 10 януари 2018 г.

Ярките и дори флуоресцентни цветове станаха малко тенденция в потребителските интерфейси и те могат да бъдат много ефективни, за да направят съдържанието да изглежда рязко и да се откроява, но не забравяйте, че текстът трябва да се чете. Екипна седмица ментово зелено изглежда удоволствие, но не е толкова лесно да прочетете бял текст върху ментово зелен бутон.

Цветът не е единствената причина за неуспех на четливостта. Тенденцията към по-нисък контраст може да има за цел да бъде по-лесна за окото, но не помага, ако трябва да се напрягате, за да прочетете типа, докато фините шрифтове и сайтовете, които не реагират, също могат да навредят на очите на потребителите. Проверете текста е лесен за четене и проверете дали може да се чете на различни устройства.

И ако търсите мечтания шрифт, тогава не пропускайте нашия списък с безплатни шрифтове .

09. Изтъняване на съдържанието

Потребителският интерфейс е неуспешен: песъчинките

The Grit има много какво да каже за себе си [Изображение: The Grit]

Наистина ли някой ще иска да влезе отделно в „за нас“, „нашите ценности“ И „нашата мисия“? Това може да са отделни концепции в очите на компанията, но изглежда малко вероятно потребителят да иска да влезе в някоя от тях конкретно и защо да накара потребителя да премине през пет кликвания, за да разбере цялата история? Този пример от Песъчинките веднага изглежда като тънко съдържание, което би било по-добре да се обедини заедно, в противен случай потребителят може да не прочете нищо от него.

10. Срам за теб!

Потребителският интерфейс е неуспешен: палео процъфтява

Paleo Flourish ви кара да се чувствате зле, че отказвате оферта [Изображение: Paleo Flourish]

Потвърждението не е голямо и не е умно. Този пример от Палео процъфтяване е един от най-агресивните в тенденцията за измама на уебсайтове. Понякога това може да се направи по хумористичен начин, но като цяло обидата на вашата целева аудитория, като я принуждавате да избира между „Продължавай тогава“ или „Не, предпочитам да остана тъжен, самотен, губещ, благодаря“, няма начин за да ги спечелите.

Прочетете още: