10 агульных недахопаў дызайну ... і як іх пазбегнуць

Дызайнерскія работы - складаны бізнес. Памыліцца занадта далёка.

Усе дробныя дэталі маюць вырашальнае значэнне для вытворчасці якаснай прадукцыі. Кожную дэталь трэба ўлічваць. Гэта можа быць лёгка згубіцца ў дэталях і страціць след. З-за гэтага ёсць некалькі неверагодна распаўсюджаных недахопаў у дызайне і ўразлівасці карыстацкага інтэрфейсу.

Як можна пазбегнуць гэтых распаўсюджаных памылак? Чытайце далей, каб атрымаць некалькі саветаў і прапаноў, якія дапамогуць пазбегнуць гэтых звычайных падводных камянёў.

Так, усё гэта грунтуецца на маім балючым вопыце дызайнера. І так, любое падабенства з рэальнымі падзеямі чыста выпадковае.

1. Адсутнасць планавання маргінальных выпадкаў (скажыце НЕ Ларэму Іпсуму)

З дапамогай Lorem Ipsum і фотаздымкаў вы лёгка зможаце стварыць прыгожы гарманічны дызайн, які хутка стане неактуальным для рэальнасці. Ваш прыгожы дызайн разбурыцца, як толькі ён напоўніцца фактычным зместам.

Каб пазбегнуць гэтага і пазбегнуць расчаравання кліентаў канчатковымі прадуктамі, якія не выглядаюць, што вы планавалі, вам неабходна сабраць інфармацыю. Збярыце як мага больш інфармацыі пра змест, які ўжо існуе, альбо пра змест, які трэба стварыць.

У прыватнасці, вам трэба ведаць, які тып змесціва з'яўляецца ў кожным раздзеле старонкі, перш чым пачаць працаваць над дызайнам інтэрфейсу. Таксама трэба ведаць мінімальны і максімальны памер змесціва (г.зн. колькасць радкоў тэксту, памеры малюнка). Гэтыя павароты называюцца краем падзенняў, таму што яны паказваюць, калі і як мяняецца інтэрфейс.

Выберыце малюнкі

Вы таксама хочаце вывучыць абмежаванні малюнкаў. Калі ў вашага кліента няма фатаграфій на заказ або не будзе купляць іх, няма сэнсу выкарыстоўваць прыгожыя, але бессэнсоўныя фатаграфіі з Unsplash.

Чаму? Фотаздымкі больш канцэптуальныя. Недастаткова выкарыстоўваць нешта прыгожае. Замест гэтага трэба выбіраць выявы, якія ствараюць апавяданне альбо маюць на ўвазе больш глыбокі сэнс.

Ніколі не выкарыстоўвайце фатаграфіі, якія не павінны быць даступнымі. Сёння велізарная колькасць інфармацыі перапаўняе людзей. Дадатковая частка бескарыснай візуальнай інфармацыі толькі раздражняе іх.

Асновы паўтарэння блокаў

Яшчэ адзін маргінальны выпадак тычыцца паўтарэння блокаў, напрыклад B. Выява + тэкст, сімвал + тэкст, лічба + тэкст і г.д. Вы павінны разгледзець, як выглядаюць гэтыя блокі з двума і дзесяццю радкамі тэксту і ці стаяць яны асобна.

Для невялікіх тэкставых блокаў, якія апісваюць функцыі, вы можаце лёгка выкарыстоўваць макет з трох слупкоў. Аднак калі ў вас больш за пяць радкоў тэксту і вы хочаце адлюстраваць усё без эліпсаў, вам трэба знайсці іншае візуальнае рашэнне. Чаму? Таму што чытанне доўгіх тэкстаў слупкоў падыходзіць толькі для газет, а не для Інтэрнэту. Магчымым рашэннем можа стаць выкарыстанне празрыстых ліній з гарызантальнай пракруткай або двухколонная раскладка.

План маштабавання

Калі вы ведаеце выпадак вашага змесціва, вы можаце больш эфектыўна выкарыстоўваць вобласць экрана і выбраць правільны рэжым карыстацкага інтэрфейсу для кожнай часткі карыстацкага інтэрфейсу. Аднак майце на ўвазе, што краёвыя футляры - гэта не толькі тое, што ў вас зараз. Добры дызайнер заўсёды павінен думаць загадзя, улічваючы магчымасць таго, што ў будучыні кліентам можа спатрэбіцца маштабаваць карыстацкі інтэрфейс.

2. Недастатковыя экранныя анатацыі

Наступная вялікая памылка, якую вы павінны лепш пазбягаць, - гэта адсутнасць анатацый у дызайне.

Уся ваша каманда - кіраўнік праектаў, спецыялісты па забеспячэнні якасці, а таксама распрацоўшчыкі інтэрфейсных і бэк-эндаў - глядзіце свае дызайнерскія экраны ў іх статычных формах, як серыя прыгожых малюнкаў. Вы не можаце ведаць, якое паводзіны вы прымаеце для кожнага элемента інтэрфейсу. Вы не можаце прадказаць, як вы гэта распрацавалі ў галаве. Тое, што можа быць відавочным для вас і вашых калегаў, не відавочна для ўсіх членаў каманды.

Па гэтай прычыне вельмі важна дадаць каментарыі пра паводзіны кожнага элемента, адрасы спасылак, анімацыі і як узаемадзейнічае экран. Калі вы прапусціце гэты крок, вы рызыкуеце непаразуменнем. Вы таксама рызыкуеце шмат непатрэбных пост-блытаніны, калі шмат працы зроблена зусім няправільна.

Лёгка зразумець, як такая дробязь, як анатацыя экрана, можа марнаваць шмат часу на распрацоўку. Гэта можа нават паўплываць на ўвесь аб'ём праекта і павялічыць выдаткі на распрацоўку.

3. Расчаравальныя ўмовы памылкі

Пры распрацоўцы карыстацкага інтэрфейсу не забывайце пра галоўнае прызначэнне карыстацкага інтэрфейсу: максімальна гладкае ўзаемадзеянне карыстальніка і сэрвісу. Інтэрфейсы - гэта не месца для сумневаў, адказаў без адказаў і нявызначанасці.

Распрацоўшчыкі павінны даваць карыстальнікам ясную зваротную сувязь з умовамі, асабліва ў выпадку адмовы. Адпаведна, апавяшчэнні аб памылках павінны адпавядаць наступным простым правілам:

  • Яны павінны быць пазнавальнымі і пазнавальнымі (напрыклад, чырвоны колер - гэта звычайны малюнак карыстацкага інтэрфейсу, які паказвае на памылку).
  • Вы павінны выразна растлумачыць, што адбылося і як карыстальнікі могуць выправіць памылку.
  • Яны павінны быць кантэкстуальнымі. Лепш адлюстроўваць паведамленні пра памылкі побач з элементам, на які яны спасылаюцца.
  • Вы не павінны раздражняць. Хіба ваш карыстальнік не раздражняецца памылкай?

Дызайнеры таксама павінны клапаціцца пра нечаканыя памылкі (напрыклад, памылкі сервера, старонка не знойдзена). Кожнае паведамленне пра памылку ўмешваецца ў паток карыстальніка. Таму мы павінны дапамагчы карыстачу справіцца з гэтым, прапанаваць магчымыя рашэнні і паспрабаваць папоўніць дрэнны досвед - асабліва, калі гэта не віна карыстальніка. Напрыклад, добрым рашэннем можа стаць стварэнне ілюстрацый або анімацыі на 404 і 500 старонках.

Будзьце асцярожныя пры праверцы формы

Пры распрацоўцы ўмоў памылкі, паспрабуйце не раздражняць сваіх карыстальнікаў. У прыватнасці, будзьце ўважлівыя да ўсіх відах праверкі формы.

Напрыклад, уявіце, што ў вас ёсць форма з абавязковымі палямі. Гэта азначае, што распрацоўшчыкі маюць адпаведную галачку: "Усе абавязковыя палі не павінны быць пустымі". Дапусцім, карыстальнік спрабуе запоўніць форму ў выпадковым парадку. Калі першае абавязковае поле страціць статус фокуса, вяртаецца памылка: "Калі ласка, запоўніце гэтае поле. Трэба! "

Наш дрэнны карыстальнік усклікае: "Пачакайце, дружа, я проста пстрыкнуў паміж полямі формы і нават не націснуў" Адправіць "!" І можа пагоршыцца. Выкажам здагадку, што ў вас ёсць яшчэ адна праверка, і кнопка "Адправіць" адключана, пакуль усе неабходныя палі не будуць пустымі.

Падумайце пра гэта на секунду. Ваш дрэнны карыстальнік нічога не зрабіў і не можа даслаць форму, але вы ўжо зрабілі некалькі памылак з ім. Гэта, безумоўна, засмуціць усіх, таму лепш пазбягаць падобных сітуацый.

Узважце выдаткі і кошт

Не слухайце распрацоўнікаў, якія спрабуюць паведаміць вам, што рэалізацыя імі так, як вы хочаце, можа быць дарагім. Памятаеце: пазбяганне гэтай праблемы абыдзецца вам кліентам! Ніхто не мае патрэбу ў паслузе ці прадукце без кліентаў. Нават калі б гэта было танна развівацца.

4. Пустыя стану занадта пустыя

Гэтая тэма тычыцца папярэдняга статусу памылак, а таксама звязана з маргінальнымі выпадкамі. Пусты стан - гэта абсалютны маргінальны выпадак, таму вам трэба актыўна думаць пра тое, каб яго пазбегнуць.

Як выглядае ваш карыстацкі інтэрфейс, калі няма дадзеных на кожнай старонцы ці ў раздзеле? Ці будзе гэта добразычлівым ці непрыемным? Ці будзе гэта выглядаць добра, альбо будзе выглядаць зламаным? Ці зразумеюць карыстальнікі, дзе яны знаходзяцца і што значыць дзяржава?

Тут мэтазгодна прадаставіць прывабную карціну з змястоўным зместам. Гэта можа быць ілюстрацыя, сімвал альбо проста тэкставы блок з прыгожай друкарняй, якая тлумачыць сітуацыю.

5. Адсутнічае іерархія тыпаграфіі

Далей лепш пазбягаць яшчэ адной тэмы, якая выклікае шмат недахопаў у дызайне - друкарня.

Тэкст - асноўная адзінка інфармацыі. Таму яна павінна быць разборлівай, пазнавальнай і добра арганізаванай. Правільна адфарматаваны тэкст дазваляе карыстальнікам прасцей успрымаць інфармацыю і робіць іх сканцэнтраванымі на тым, што сапраўды важна.

Выкарыстоўвайце шрыфты і стылі

Гульня з шрыфтамі можа быць цікавай. Аднак, калі хтосьці паспрабуе прачытаць штосьці, што мяняе шрыфты дзесяць разоў у абзацы, гэта можа хутка стаць знясільваючым і раздражняльным.

Каб пазбегнуць стомленасці шрыфта такога тыпу, я рэкамендую не выкарыстоўваць больш за тры шрыфты ў адным макеце. Аднак майце на ўвазе розніцу паміж стылямі шрыфтоў і шрыфтоў. Кожны шрыфт мае свае стылі: звычайны, сярэдні, тлусты, чорны, курсіў, тлусты курсіў і гэтак далей. Калі вы аб'яднаеце ўсе гэтыя стылі шрыфта з вялікім і малым шрыфтам, двух-трох шрыфтоў больш чым дастаткова для стварэння прывабнай сістэмы друкарні.

Звярніце ўвагу на кернінг

Калі вы думаеце пра друкарню, не забудзьцеся выкарыстоўваць Кернінг. Калі вы ніколі не чулі пра Кернінг, не хвалюйцеся. гэта вельмі проста. Кернінг - гэта працэс тыпаграфіі, пры якім прамежак паміж сімваламі рэгулюецца альбо ўручную, альбо аўтаматычна.

Кернінг важны, паколькі рэгуляванне інтэрвалу паміж сімваламі ў пэўных сітуацыях можа палепшыць разборлівасць і знешні выгляд друкарні. Аднак няправільнае выкарыстанне кернінга - альбо невыкананне яго - можа прывесці да сур'ёзных праблем. Гэта можа прывесці да няправільнага тлумачэння альбо ненаўмыснага разбурэння згуртаванасці дызайну.

Падтрымліваць візуальную іерархію

Заўсёды старайцеся падтрымліваць візуальную іерархію паміж стылямі шрыфтоў на вашай старонцы. Выкарыстоўвайце кантрасную друкарню, каб візуальна падзяліць розныя пласты тэксту і стварыць строгую іерархію. Каб іерархія інфармацыі была добра бачная на старонцы, галоўныя загалоўкі на старонцы павінны быць вылучаны больш за ўсё. Падзагалоўкі павінны быць значна меншымі, але ўсё яшчэ добра бачнымі.

Гэты ж прынцып распаўсюджваецца і на візуальную іерархію ўнутры лагічнага блока. Загаловак павінен быць самым вялікім элементам дызайну на старонцы, а затым меншым, менш прыкметным загалоўкам. Далей усе наступныя загалоўкі павінны быць прыкметна меншымі за загаловак і аднолькавай вагі. Для апісання функцый трэба выкарыстоўваць найменшыя шрыфты і г.д. Гэтая візуальная іерархія дазваляе наведвальнікам сайта адрозніваць больш і менш важную інфармацыю.

6. Недастатковая пракладка і зазоры

Правільнае пракладка і інтэрвал гарантуе, што ваш макет выглядае чыстым і ўпарадкаваным, а чытачам лягчэй чытаць і разумець інфармацыю.

Прамежкі аднолькавага памеру павінны быць размешчаны вакол лагічных блокаў (напрыклад, зверху і знізу, і злева і справа). Калі прабелы будуць няроўнымі, ваша старонка будзе выглядаць бруднай, і карыстальнікі могуць разглядаць кожны раздзел не аднолькава.

Занадта малая напаўняльнасць азначае, што карыстальнікі не могуць разбіць кантэнт на лагічныя блокі. Каб пазбегнуць плаўлення лагічных частак, трымаеце іх асобна і ўстаўце паміж імі вялікая прастора.

Самы просты спосаб падтрымання візуальнай іерархіі - гэта наступнае простае правіла: адлегласць паміж рознымі лагічнымі блокамі павінна быць больш, чым адлегласць паміж загалоўкам і тэкстам у кожным блоку. Дапусцім, у вас ёсць доўгі тэкставы блок, які змяшчае загалоўкі, падзагалоўкі і абзацы:

  • Усталюйце загалоўку для загалоўкаў на 40 пікс і вынікайце за ёй з абзаца тэксту.
  • Усталюйце інтэрвал абзацу ў 10 пікс.
  • Калі пасля абзаца ёсць падзагаловак, укажыце 30 пікселяў для запаўнення абзаца (г.зн. адлегласць паміж абзацам і верхнім краем падзагалоўкі складае 30 пікселяў) і 20 пікселяў для запаўнення абзаца (г.зн. адлегласць паміж падзагалоўкам і абзацам) 20 пікселяў, што перавышае адлегласць паміж абзацамі.

Гэта ставіць на першы план найбольш важныя і буйныя элементы. Самы вялікі тэкст - загаловак - займае вялікую прастору. Аднак гэта прастора павінна быць бліжэй да наступных звязаных элементаў.

7. Брудная іканаграфія

Сімвалы неверагодна карысныя, калі вам неабходна выказаць сэнс маленькім сімвалам або коратка праілюстраваць апісанне. Яны таксама з'яўляюцца неад'емнай часткай сучасных інтэрфейсаў, асабліва для мабільных прылад.

У дадатках сімвалы часта адпавядаюць кнопкам. Паглядзіце на Instagram: адлюстроўваюцца толькі абразкі і тэкст.

Па гэтай прычыне вельмі важна правільна падабраць візуальны вобраз, які адпавядае значэнню элемента. Гучыць проста, ці не так? Не. Кожны дызайнер у свеце ведае, як балюча знайсці патрэбны сімвал.

Вы павінны распавесці гісторыю вельмі простымі і агульнымі малюнкамі, якія кожны можа зразумець. І вам трэба адпавядаць гэтыя абразкі з агульным стылем карыстацкага інтэрфейсу. Затым вы павінны зрабіць іх даступнымі распрацоўшчыкам у фармаце SVG.

Магчыма, вы шукалі бясплатныя сімвалы і былі ў захапленні, калі знайшлі прыгожы вобраз для кожнага элемента. Яны думаюць, як выдатна яны перапісваюцца адзін з адным! Вам будзе зразумела ўсім! На жаль, агульнае ўражанне ад абранага вамі сімвала нейкім чынам выглядае даволі хаатычна і неахайна. Як можна пазбегнуць такога кшталту каша? Вось кароткі спіс для вас:

  • Шырыня радка - пасля змянення памеру ўсе сімвалы павінны мець аднолькавую шырыню радка. У адваротным выпадку вельмі заўважна, што гэта не так.
  • Кутні радыус - калі вашы сімвалы ўтрымліваюць прамавугольную форму, параўнайце радыус вугла ўсіх сімвалаў вашага набору. Калі ён адрозніваецца для розных сімвалаў, лепш выправіце.
  • Форма шапкі лініі (для акрэсленых сімвалаў) - яна можа быць прамавугольнай або закругленай.
  • Злучыце форму кутоў (для акрэсленых сімвалаў) - яна можа быць прамавугольнай або закругленай формы.

Гэта праўда, што не патрабавальныя карыстальнікі могуць не заўважаць рознай шырыні ліній і радыусаў кута. Аднак агульнае ўражанне будзе няправільным, і карыстальнікі будуць адчуваць гэта.

Іншымі словамі, у той час як няправільна выкарыстоўваць бясплатныя сімвалы, лепш за ўсё іх захаваць. Калі вы выкарыстоўваеце бясплатныя сімвалы, праект выглядае танна і ў некаторых выпадках непрафесійна. Ёсць таксама шмат бясплатных сімвалаў, якія людзі адразу пазнаюць. Чаму? Вы ўжо бачылі іх усюды.

Па гэтай прычыне я раю строга выбіраць свабодныя сімвалы альбо - яшчэ лепш - ствараць сімвалы самастойна. Нестандартныя сімвалы заўсёды даюць выдатны вопыт.

8. Нізкі кантраст

Кантраст - гэта асноўны прынцып графічнага дызайну. Нашы вочы любяць кантраст. Кантраст - гэта інструмент, які дызайнеры выкарыстоўваюць для кантролю ўвагі карыстальнікаў.

Кантраст узнікае, калі два элементы на старонцы розныя. Напрыклад, кантраст можна стварыць, выкарыстоўваючы розныя колеры для тэксту і колеру фону. Гэта можа быць загаловак вялікім, тлустым, шорсткім шрыфтам побач з шыкоўным шрыфтам sans serif для асноўнага тэксту. Гэта можа быць розніца паміж вялікім і маленькім графічным малюнкам, альбо гэта грубая тэкстура ў спалучэнні з гладкай тэкстурай.

Важнае значэнне кантрасту заключаецца ў тым, што кантрасныя элементы павінны быць зусім іншымі. Не проста крыху інакш - заўважная, смелая розніца.

Выкарыстоўвайце прабел

Аднак калі вы размесціце два зусім розных элемента вельмі блізка адзін да аднаго, карыстальнік не можа зразумець, які элемент з'яўляецца "галоўным элементам". Такім чынам, мы можам сказаць, што кантраст не толькі ў выкарыстанні розных візуальных стыляў да элементаў, але і ў тым, як выкарыстоўваць прабел. Гэта таму, што для дасягнення кантрасту часам трэба аддзяляць элементы прабеламі.

Прасторы важныя, каб карыстальнікі маглі лёгка чытаць ваш кантэнт. Зразумела, белае прастору нельга выкарыстоўваць належным чынам: занадта шмат белага прасторы альбо занадта шмат змесціва на невялікай плошчы. На многіх сайтах з празмернай рэкламай таксама не хапае дастатковай колькасці белага прасторы.

Забяспечыць дастатковы кантраст паміж тэкстам і выявай

Пазбягайце нізкага кантрасту для тэкставых копій, размешчаных на малюнку. Кантраст паміж тэкстам і фонам павінен быць дастатковым. Пастаўце кантрасны фільтр над выявай, каб вылучыць копію. Чорны колер - папулярны колер, але вы можаце таксама выкарыстоўваць яркія колеры і змешваць і адпавядаць ім.

Іншы варыянт - выкарыстанне кантраснага малюнка з самага пачатку. У гэтым выпадку вы можаце змясціць копію на цёмную вобласць фота ці выявы.

Пазбяганне перадазіроўкі кантрасту

Пазбягайце выкарыстання занадта шмат стыляў на адной старонцы. Занадта шмат тыпаграфічных і дызайнерскіх стыляў на адной старонцы робяць іх непрафесійнымі - а таксама робяць іх больш цяжкім для чытання. Каб пазбегнуць гэтага, абмяжуйцеся адным шрыфтам і двума варыянтамі насычэння (напрыклад, звычайным і тлустым).

Пазбягайце вылучэння вузкіх бакавых элементаў у колеры. Гэта проста не выглядае добра. Напрыклад, загалоўкі ўжо добра пазначаны з-за іх памеру, насычанасці і тыпу. Вы хочаце вылучыць пэўную кропку на старонцы? Выкарыстоўвайце каляровы фон для ўсяго блока, уключаючы звязаны загаловак і копію тэксту.

9. Не думайце па платформах

Так, у ідэале гэта не павінна быць праблемай у сучасным свеце. Мы ўсе ведаем, што большасць карыстальнікаў мабільнай сувязі атрымлівае доступ да вэб-службаў. На жаль, многія дызайнеры ўсё яшчэ імкнуцца забыць гэты факт. (Ці кліенты не хочуць губляць грошы на стварэнне дызайну, аптымізаванага для мабільных тэлефонаў?)

Для прафесіяналаў у галіне дызайну, аднак, праблема з аптымізацыяй для некалькіх прылад не павінна ўзнікаць. Пры стварэнні карыстацкага інтэрфейсу заўсёды варта ўлічваць шырока вядомы "Mobile First" падыход. Засяродзьцеся на змесце, якое бачыць кожны тып карыстальніка на кожнай старонцы. Затым спытаеце сябе: "Ці выбраны я элемент кіравання карыстацкім інтэрфейсам для адлюстравання гэтага канкрэтнага змесціва ці не?"

Вы можаце выбраць добры элемент карыстацкага інтэрфейсу, які добра працуе на настольных прыладах. Аднак для карыстальнікаў смартфонаў ён не падыходзіць. Ці наадварот. Па гэтай прычыне важна заўсёды сачыць за разнастайнасцю прылад, якія мы павінны распрацаваць сёння.

10. Занадта шмат дызайну

Толькі таму, што вы можаце дадаць нешта ў свой дызайн, не азначае, што варта. Прастата прапануе мноства пераваг. Таму будзьце ўважлівыя, калі вы звар'яцееце за стылямі. Перавышэнне дызайну не з'яўляецца сур'ёзнай памылкай, але можа выклікаць сур'ёзныя праблемы.

Напрыклад, выкарыстанне занадта шмат кветак на адной старонцы выклікае здзіўленне. становіцца незразумела, якія біты важнейшыя. Адных-двух колераў дастаткова, каб візуальна падкрэсліць тое, што сапраўды важна.

Тое ж самае тычыцца і стыляў шрыфтоў. Дастаткова вылучыць загалоўкі і падзагалоўкі і выкарыстоўваць кантраст для ключавых тэрмінаў.

Чым больш "рэчы" вы ўкладзяце ў свой дызайн, тым складаней для карыстальніка думаць пра яго, каб атрымаць інфармацыю, якую ён утрымлівае. Дызайн павінен дыхаць і жыць незалежна. Таму майце на ўвазе: прасторы не абавязкова дрэнныя. У многіх выпадках гэта лепш, чым запоўніць кожны квадратны цаля пустога месца.

Ці ёсць у вашай канструкцыі памылкі, якія трэба выправіць? Дайце нам ведаць! Наша дызайнерская каманда сусветнага ўзроўню можа дапамагчы вам пазбегнуць вар'яцтва дызайну пры зносінах больш ясна і прыгожа.

Пра аўтара

Старэйшая дызайнерка UI / UX Марыя Пісарэнка далучылася да спіртзавода ў 2018 годзе. Яна мае больш за 6 гадоў вопыту дызайну і стварыла незлічоную колькасць інтэрфейсаў для кліентаў па ўсім свеце. Страсці Марыі ўключаюць у сябе іканаграфію, друкарню і ілюстрацыі; Яна лічыць, што дызайн гуляе ключавую ролю ў тым, каб зрабіць свет лепшым.