8 саветаў па дызайне карыстацкага інтэрфейсу альбо як эфектыўна выкарыстоўваць карыстацкі інтэрфейс? | SpdLoad

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

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

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

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

8 па сутнасці добрых саветаў па дызайне інтэрфейсу

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

Ён складаецца з канцэпцый візуальнага дызайну, інтэрактыўнага дызайну і інфармацыйнай архітэктуры.

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

Але што адрознівае эфектыўны і бескарысны карыстацкі інтэрфейс у дызайне MVP?

Давайце разгледзім 8 саветаў.

Пачніце з даследаванняў карыстальніка UX

У дызайне карыстацкага інтэрфейсу ўсё пачынаецца ад карыстальніка.

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

Чым больш вы ведаеце сваіх карыстальнікаў, тым больш вы можаце прадбачыць іх патрэбы і эфектыўна клапаціцца пра іх.

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

Стварыце праектныя чаканні інтэрфейсу

Паслядоўнасць і знаёмства - важная канцэпцыя дызайну інтэрфейсу.

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

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

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

Пераканайцеся, што ваш сайт змяшчае знаёмыя элементы ў знаёмых месцах. Добры падыход, каб пачаць тэставанне выкарыстання прататыпаў.

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

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

Такая навучальная копія можа эфектыўна кіраваць чаканнямі карыстальніка.

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

Калі яны ёсць, яны пойдуць наперад, калі не, то ваш эфектыўны карыстацкі інтэрфейс проста выратаваў іх ад выпадковага націску.

Пераканайцеся ў хуткім рэагаванні карыстацкага інтэрфейсу

Дызайн інтэрфейсу - гэта пункт узаемадзеяння і зносін з вашымі карыстальнікамі.

Калі я націскаю на спасылку, я чакаю, што яна адкрыецца. Калі я націскаю кнопку, я мяркую, што колер зменіцца.

У дызайне інтэрфейсу дамінуе працэс перадачы і дзеяння і рэагавання.

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

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

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

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

Размяшчэнне элементаў і памер

Дызайн карыстацкага інтэрфейсу - усё аб пстрычках, націсках і скрутках.

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

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

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

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

Зрабіце дызайн простым

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

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

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

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

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

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

Такім чынам, як вы пачнеце працаваць над наступным дызайнам інтэрфейсу, перайдзіце на просты інтэрфейс.

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

Замест таго, каб хаваць меню, зрабіце яго больш абцякальным.

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

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

Дызайн з улікам даступнасці

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

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

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

Для канкрэтнай аўдыторыі CVD асобныя колеры не даюць дастатковай інфармацыі.

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

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

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

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

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

  • Навучыце сябе, якія кантрасты колеру лепш і горш для ССЗ і іншай аўдыторыі з рознымі магчымасцямі. Вы можаце выкарыстоўваць онлайн-інструменты праверкі кантрасту і колеру, якія дапамогуць вам: Color Oracle, Sim Daltonism і Contrast Checker і г.д.
  • Заўсёды маркіруйце колеры ў малюнках / апісаннях вашых прадуктаў, калі вы працуеце ў краме электроннай камерцыі.
  • Пераканайцеся, што вашы спасылкі заўсёды падкрэсліваюцца, бо аўдыторыя з недахопам колеру можа прапусціць толькі змяненне колеру.
  • Дадайце ўзоры, фактуры і змены формаў, каб дапоўніць колеры ў сваіх візуалізацыйных дадзеных і графіках.
  • Пераканайцеся, што асноўныя кнопкі вашага сайта адпаведным чынам адрозніваюцца ад іншых кнопак. Як карысны рэсурс, які дапамагае зразумець дызайн даступнасці, вось карысная спасылка.

Стварыце спагадны вэб-сайт

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

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

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

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

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

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

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

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

Трэніруйце вочы на ​​добры дызайн, і практыкуйце, практыкуйце, практыкуйце!

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

І паглядзіце, як бы вы зрабілі гэта па-іншаму.

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

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

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

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

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

Эфектыўны карыстацкі інтэрфейс - што далей?

Дык там у вас ёсць

8 асабіста правераных і правераных саветаў па дызайне, якія шмат разоў выратавалі маю скуру. Спадзяюся, яны вам аднолькава карысныя.

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

Такім чынам, працягвайце вучыцца.

Першапачаткова апублікавана на https://spdload.com.