Вероватно сте већ били тамо. Како бирамо између приказивања модала корисницима и када их пребацујемо на посебну, нову страницу? И да ли је то уопште важно? У ствари, јесте. Одлука утиче на ток корисника, њихов контекст, њихову способност да траже детаље, а са њом и учесталост грешака и завршетак задатака. Обе опције могу бити ометајуће и фрустрирајуће - у погрешно време и на погрешном месту. Зато је боље да то исправимо. Па, да видимо како то учинити. Модали наспрам дијалога наспрам преклапања наспрам светлећих кутија Иако често говоримо о једној модалној компоненти корисничког интерфејса, често игноришемо фине, замршене нијансе између свих различитих типова модала. У ствари, није сваки модал исти. Модали, дијалози, преклапања и оквири за преглед — сви звуче слично, али су заправо прилично различити:
Дијалог Генерички термин за „разговор“ (корисник ↔ систем). ПреклапањеМала табла са садржајем која се приказује на врху странице. МодалУсер мора бити у интеракцији са преклапањем + онемогућеном позадином. НонмодалУсер мора да комуницира са омогућеним преклапањем + позадина. Лигхтбок Затамњена позадина да бисте усмерили пажњу на модал.
Како истиче Ана Кејли, већина преклапања се појављује у погрешно време, прекида кориснике током критичних задатака, користи лош језик и прекида проток корисника. Они су по природи прекидни, и обично са високим нивоом озбиљности без јаке потребе за тим.
Сигурно је да корисници морају бити успорени и прекинути ако последице њихове акције имају велики утицај, али за већину сценарија немодали су много суптилнији и пријатељскија опција да се на нешто скрене пажња корисника. Ако ништа друго, увек предлажем да то буде подразумевано. Модали → За појединачне, самосталне задатке Као дизајнери, често одбацујемо модале као небитне и досадне - а често и јесу! — ипак имају и своју вредност. Они могу бити од велике помоћи да упозоре кориснике на потенцијалне грешке или им помогну да избегну губитак података. Они такође могу помоћи у обављању повезаних радњи или детаљнијем детаљу без прекидања тренутног стања странице. Али највећа предност модала је то што они помажу корисницима да задрже контекст тренутног екрана. То не значи само кориснички интерфејс, већ и уређени унос, позицију померања, стање хармоника, избор филтера, сортирање и тако даље.
Повремено, корисници морају брзо да потврде избор (нпр. филтери као што је приказано изнад) и затим да одмах наставе одатле. Аутоматско чување може постићи исто, наравно, али није увек потребно или пожељно. А блокирање корисничког интерфејса често није добра идеја. Међутим, модали се не користе ни за какве задатке. Обично их користимо за појединачне, самосталне задатке где корисници треба да ускоче, заврше задатак, а затим се врате тамо где су били. Није изненађујуће да они добро функционишу за кратке интеракције високог приоритета (нпр. упозорења, деструктивне радње, брзе потврде). Када модали помажу: 🚫 Модали су често ометајући, инвазивни и збуњујући.🚫 Они отежавају поређење и копирање-пејст.✅ Ипак, модали омогућавају корисницима да одржавају више контекста.✅ Корисни су за спречавање неповратних грешака и губитка података.✅ Корисно ако би слање корисника на нову страницу ометало. ✅ Прикажите модал само ако корисници вреднују поремећај.✅ Подразумевано, преферирајте неблокирајуће дијалоге („немодалне“).✅ Дозволите корисницима да минимизирају, сакрију или врате дијалог касније.✅ Користите модал да успорите кориснике, нпр., проверите сложени унос.✅ Дајте излаз са „Затвори или кликните на дугме ван”, ЕСЦ тастером. Странице → За сложене токове рада у више корака Чаробњаци или навигација са картицама унутар модала не функционишу превише добро, чак и у сложеним пословним производима – тамо бочне плоче или фиоке обично раде боље. Проблеми почињу када корисници морају да упореде или упућују на тачке података - али модали блокирају ово понашање, па уместо тога поново отварају исту страницу на више картица.
За сложеније токове и процесе у више корака најбоље функционишу самосталне странице. Странице такође функционишу боље када захтевају пуну пажњу корисника, а упућивање на претходни екран није од велике помоћи. А фиоке раде за подзадатке који су превише сложени за једноставан модални, али им није потребна навигација преко целе странице. Када избегавати модале: 🚫 Избегавајте модале за поруке о грешкама.🚫 Избегавајте модале за обавештења о функцијама.🚫 Избегавајте модале за искуство укључивања.🚫 Избегавајте модале за сложене, дугачке задатке у више корака.🚫 Избегавајте више угнежђених модала и уместо њих користите прев/нект.🚫 Избегавајте модале који нису апсолутно неопходни аутоматски. Избегавајте обојеЗа поновљене задатке У многим сложеним производима са великим бројем задатака, корисници ће се наћи да обављају исте задатке више пута, изнова и изнова. Тамо, и модали и нове навигације страница додају трење јер прекидају ток или приморавају кориснике да прикупе податке који недостају између свих различитих картица или приказа. Пречесто корисници заврше са поквареним искуством, пуним бескрајних потврда, претераних упозорења, опширних упутстава или само недостајуће референтне тачке. Као што је Саулиус Стебулис поменуо, у овим сценаријима, прошириви одељци или уређивање на месту често функционишу боље — они држе задатак усидрен за тренутни екран. У пракси, у многим сценаријима, корисници не обављају своје задатке изоловано. Они треба да потраже податке, копирају и залепе вредности, прецизирају уносе на различитим местима или само прегледају сличне записе док раде на својим задацима. Прекривачи и фиоке су кориснији у одржавању приступа позадинским подацима током задатка. Као резултат, контекст увек остаје на свом месту, доступан за референцу или копи-пејст. Сачувајте модале и навигацију страница за тренутке у којима прекид заиста додаје вредност — посебно да бисте спречили критичне грешке. Модали наспрам страница: Стабло одлучивања Пре неког времена, Рајан Нојфелд је саставио веома користан водич који ће помоћи дизајнерима да изаберу између модала и страница. Долази са згодним ПНГ цхеатсхеет-ом и Гоогле Доц шаблоном са питањима рашчлањеним на 7 секција. Дугачак је, изузетно темељан, али веома лак за праћење:
Можда изгледа застрашујуће, али то је прилично једноставан процес у 4 корака:
Контекст екрана. Прво проверавамо да ли корисници треба да одржавају контекст основног екрана. Сложеност и трајање задатка. Једноставнији, фокусирани задаци који не ометају пажњу могли би да користе модални, али дуги, сложени токови захтевају страницу. Референца на основну страницу. Затим проверавамо да ли корисници често морају да се позивају на податке у позадини или је задатак једноставна потврда или избор. Одабир правог преклапања. Коначно, ако је преклапање заиста добра опција, оно нас води да бирамо између модалног или немодалног (склон немодалном).
Враппинг Уп Кад год је могуће, избегавајте блокирање целог корисничког интерфејса. Нека дијалог плута, делимично покрива кориснички интерфејс, али омогућава навигацију, померање и копирање и лепљење. Или прикажите садржај модала као бочну фиоку. Или уместо тога користите вертикалну хармонику. Или доведите кориснике на засебну страницу ако треба да покажете много детаља. Али ако желите да повећате ефикасност и брзину корисника, избегавајте модале по сваку цену. Користите их да успорите кориснике, да им повежете пажњу, да спречите грешке. Као што је Тереза Фесенден приметила, нико не воли да га прекидају, али ако морате, уверите се да је апсолутно вредно трошкова. Упознајте „Паметни обрасци дизајна интерфејса“ Можете пронаћи цео одељак о модалима и алтернативама у Смарт Интерфаце Десигн Паттернс, нашем 15-сатном видео курсу са 100-тима практичних примера из пројеката из стварног живота — са обуком за УКС уживо касније ове године. Све од мега падајућих менија до сложених табела предузећа — са 5 нових сегмената који се додају сваке године. Пређите на бесплатни преглед. Користите код БИРДИЕ да уштедите 15% попуста. Упознајте Смарт Интерфаце Десигн Паттернс, наш видео курс о дизајну интерфејса и корисничком доживљају.
Видео + УКС обука Само видео Видео + УКС обука 495,00 $ 699,00 $
Набавите видео + УКС обуку 25 видео лекција (15 х) + УКС тренинг уживо. 100 дана гаранције поврата новца. Само видео 300,00 УСД 395,00 УСД
Преузмите видео курс 40 видео лекција (15х). Ажурира се сваке године. Доступан и као УКС пакет са 2 видео курса.
Корисни ресурси
Различите врсте искачућих прозора, Ана Кејли Најбоље праксе за дизајнирање УИ модала, Укцел Користимо превише проклетих модала: УКС смернице, Адриан Еггер Модални и немодални дијалози, Тхересе Фессенден Модерни дизајн корисничког интерфејса предузећа: Модални дијалози, Џејмс Џејкобс Модали у системима пројектовања
