10 общи грешки в дизайна ... и как да ги избегнем

Работата по проектиране е сложен бизнес. Прекалено лесно е да объркаш.

За да създадете висококачествени продукти, всички малки детайли са от изключително значение. Всеки детайл трябва да се вземе предвид. Може лесно да се изгубите в детайлите и да загубите поглед върху голямата картина. Ето защо има няколко невероятно често срещани грешки и слабости в дизайна на потребителския интерфейс (UI).

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

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

1. Липса на планиране за ръбовите случаи (кажете НЕ на Lorem Ipsum)

Използвайки lorem ipsum и стокови снимки, можете лесно да създадете красив, хармоничен дизайн ..., който бързо ще бъде без значение за реалността. Вашият красив дизайн ще бъде разбит, след като бъде изпълнен от истинското съдържание.

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

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

Избор на изображения

Също така ще искате да проучите ограниченията на изображението. Ако вашият клиент няма персонализирани снимки или няма да купува такива, няма смисъл да използвате красиви, но безсмислени снимки от Unsplash.

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

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

Разбиране на повтарящите се блокове

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

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

Планиране на мащабиране

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

2. Неадекватни анотации на екрана

Следващата голяма грешка, която е по-добре да избегнете, е липсата на пояснения във вашите дизайни.

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

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

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

3. Неприятни състояния на грешки

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

Дизайнерите трябва да предоставят ясна обратна връзка на потребителите относно състоянията, особено в случаите на състояния на грешки. Съответно известията за грешки трябва да отговарят на следните прости правила:

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

Дизайнерите също трябва да се грижат за неочаквани грешки (напр. Грешки в сървъра, страницата не е намерена). Всяко съобщение за грешка е пречка за потока на потребителя. Ето защо трябва да помогнем на потребителя да се справи с него, да предостави всякакви възможни решения и да се опитаме да изгладим лошо преживяване - особено ако не е грешка на потребителя. Например, добро решение може да бъде проектирането на илюстрации или анимации за 404 и 500 страници.

Бъдете внимателни с проверките на формуляра

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

Например, представете си, че имате формуляр с задължителни полета. Това означава, че разработчиците имат съответна отметка „Всички задължителни полета не трябва да бъдат празни.“ Да речем, че потребителят се опитва да попълни формата, но в произволен ред. Когато първото задължително поле загуби състоянието на фокуса, то връща грешка: „Моля, попълнете това поле. Задължително е!"

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

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

Претегляне на цената и стойността

Не слушайте разработчиците, които се опитват да ви кажат, че ще струва високо ниво на усилия, за да се внедрят по желания от вас начин. Запомнете: НЕ избягването на този проблем ще ви струва клиенти! Никой не се нуждае от услуга или продукт без клиенти. Дори и да е било евтино да се развива.

4. Твърде празни празни състояния

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

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

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

5. Липса на йерархия на типографията

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

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

Използване на шрифтове и стилове на шрифтове

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

За да избегнете този вид умора от шрифт, предлагам да използвате не повече от три шрифта във всяко едно оформление. Това каза, помнете разликата между шрифтове и стилове на шрифтове. Всеки шрифт има свой набор от стилове: редовен, среден, удебелен, черен, курсив, удебелен курсив и т.н. Когато комбинирате всички тези стилове на шрифт с главни и малки букви, два или три шрифта са повече от достатъчни за създаване на атрактивна система за типография.

Обръщайте внимание на Кернинг

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

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

Поддържане на визуална йерархия

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

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

6. Неадекватна подложка и разстояние

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

Пространствата със същия размер трябва да се задават около логически блокове (например в горната и долната част и в лявата и дясната страна). Ако пространствата са неравномерни, страницата ви ще изглежда разхвърляна и потребителите може да не обръщат внимание на всеки раздел.

Прекалено малкото напълване означава, че потребителите не могат да разделят съдържание на логически блокове. За да не се смесват логически части, дръжте ги отделно и поставете голямо пространство между тях.

Лесен начин за поддържане на визуална йерархия е да следвате това просто правило: Подплънката между различни логически блокове трябва да е по-голяма от подложката между заглавието и текста във всеки блок. Например, кажете, че имате дълъг блок от текст, който включва заглавия, подглави и абзаци:

  • Задайте долната част на заглавието на 40 px, след което я следвайте с абзац от текст.
  • Задайте дъното на абзаца на 10px.
  • Ако след абзаца има подзаглавие, дайте му 30px за подплънки отгоре (т.е. пространството между абзаца и горната част на подзаглавието ще бъде 30px) и 20px за подплънката отдолу (т.е. пространството между долната част на подзаглавието и абзаца ще бъде 20px, което е по-голямо от интервала между параграфите).

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

7. Бърка иконография

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

В приложенията иконите често са еквивалент на бутоните. Просто вижте Instagram: Ще видите само икони и текст.

Ето защо е много важно да изберете правилното визуално изображение, което да съответства на значението на елемента. Звучи просто, нали? Не. Всеки дизайнер в света знае колко болезнено може да бъде да намерите точно подходящата икона.

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

Може би сте търсили безплатни икони и сте се развълнували, когато сте намерили приятно изображение за всеки елемент. Мислите си, колко перфектно съответстват един на друг! Те ще бъдат разбираеми за всички! За съжаление, по някакъв начин цялостното впечатление от избрания от вас икона се чувства доста разхвърлян и неподправен. Как можете да избегнете този вид бъркотия? Ето кратък списък за вас:

  • Ширина на линията - След преоразмеряване всичките ви икони трябва да имат равна ширина на линията. В противен случай ще бъде много забележимо, че не
  • Ъглов радиус - Ако вашите икони включват някои правоъгълни форми, сравнете радиуса на ъгъла на всяка икона във вашия комплект. Ако е различно за различните икони, по-добре да го поправите.
  • Линия форма на капачката (за очертани икони) - Тя може да бъде правоъгълна или заоблена.
  • Ъглите съединяват форма (за очертани икони) - Тя може да бъде правоъгълна или заоблена.

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

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

Ето защо моят съвет е да бъдете строго избирателни с безплатни икони или - още по-добре - сами да проектирате икони. Персонализираните икони винаги осигуряват превъзходно изживяване.

8. Нисък контраст

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

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

Важното за контраста е, че контрастиращите елементи трябва да са напълно различни. Не само малко по-различно - забележима, смела разлика.

Използване на бялото пространство

Това каза, ако поставите два напълно различни елемента много близо един до друг, потребителят няма да разбере кой елемент е „главният“. Ето защо можем да кажем, че контрастът не е само в прилагането на различни визуални стилове към елементи, но и в изкуството да се използва бялото пространство. Това е така, защото понякога, за да направите елементите контрастни, трябва да ги разделите с празно пространство.

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

Осигуряване на достатъчен контраст между текст и изображения

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

Друг вариант е да използвате контрастно изображение от самото начало. В този случай можете да поставите копието върху тъмен участък от снимката или изображението.

Избягване на предозиране с контраст

Избягвайте да използвате твърде много стилове на една страница. Твърде много типографски и дизайнерски стилове на една страница го правят непрофесионален - а също и затрудняват четенето. За да избегнете това, ограничете се до един шрифт и две опции за насищане (например, нормално и удебелено).

Избягвайте да подчертавате тесните елементи на страницата с цвят. Просто не изглежда добре Например, заглавията вече са добре маркирани благодарение на техния размер, вид наситеност и подплънки. Искате ли да подчертаете определена точка на страницата? Използвайте цветен фон за целия блок, включително свързано заглавие и текстово копие.

9. Неуспешно мислене на крос-платформата

Да, в идеалния случай това вече не би трябвало да е проблем в днешния свят. Всички знаем, че повечето потребители имат достъп до уеб услуги от мобилни устройства. За съжаление, много дизайнери все още са склонни да забравят този факт. (Или може би клиентите не искат да разделят парите, за да създават дизайни, оптимизирани за мобилни устройства?)

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

Можете да изберете хубав потребителски интерфейс, който ще работи перфектно на десктоп устройства, но няма да е чудесен за потребителите на смартфони. Или обратното. Ето защо е важно винаги да имаме предвид голямото разнообразие от устройства, които трябва да проектираме в днешно време.

10. Прекалено много дизайн

Само защото можете да добавите нещо към дизайна си, не означава, че трябва. Простотата предлага изобилие от предимства. Затова бъдете внимателни за полудяване със стилове. Докато прекаленото проектиране не е основна грешка, това може да доведе до сериозни проблеми.

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

Можем да кажем същото за стиловете на шрифта. Достатъчно е да наблегнете на заглавия и подглави и да използвате контраст за ключови фрази.

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

Има ли дизайн грешки, които се нуждаят от поправяне? Уведоми ни! Нашият най-отличен дизайнерски екип може да ви помогне да избегнете лудост по дизайна, докато общувате по-ясно и красиво.

за автора

Старшият UI / UX дизайнер Мария Писаренко се присъедини към Distillery през 2018 г. Тя носи над 6 години опит в дизайна и е изградила безброй интерфейси за клиенти по целия свят. Страстите на Мария включват иконография, типография и илюстрация; тя вярва, че дизайнът играе ключова роля за превръщането на света в по-добро място.