Най-честият проблем, който виждаме при редизайн, е празният първи екран. Понякога той е пълен със скъпо заснето видео, анимирано лого и заглавие от пет думи. Празен е откъм информация. Човекът е отворил сайта, за да разбере дали можете да му помогнете, а единственият отговор пред него е „Добре дошли в нашия свят“.
В 88Lab си даваме три секунди, за да покажем какво предлага бизнесът и каква е следващата стъпка. Това е наш работен тест за яснота. Покажете първия екран за кратко на човек, който не познава фирмата, и го попитайте какво може да направи оттук. Ако посетителят помни цвета на фона, но не знае дали фирмата продава мебели, проектира кухни или предлага интериорни консултации, първата ни работа е по заглавието и предложението. Анимацията може да почака.
Шестте техники във видеото „6 EASY Tips to 10x Any Site’s Design“ дават добра основа за такъв преглед. От него вземаме шест дизайнерски решения и ги прилагаме към задачи от нашата практика. Ще видите защо при медия с голям архив си струва да започнете от едно трудно заглавие, а при подарък с персонален надпис най-важният детайл се появява чак в количката.[1]
Какво трябва да може да направи посетителят
Преди да отворите програмата за дизайн, вземете три истински въпроса от последните си разговори с клиенти. Когато някой пита „Работите ли по мой чертеж?“, на страницата липсва различна информация от тази, която търси човекът с въпроса „Може ли да видя как изглежда на живо?“. За първия подгответе кратко обяснение как приемате задание. За втория подберете завършен обект и го покажете с достатъчно подробности. Така вече имате основание да сложите всяко от двете неща на страницата.
Опишете успеха и от страната на бизнеса. При хотел запитването може да е ценно, ако носи дати, брой гости и начин за връзка. При медията успех е читателят да намери конкретна публикация в архива. При търговец на едро интересът към снимка на опаковката добива делови смисъл, когато купувачът открие разфасовката и може да попита за доставка. Ако всички тези задачи минават под името „повече ангажираност“, дизайнерът трудно ще вземе аргументирано решение какво да уголеми и какво да съкрати. В портфолиото на 88Lab има примери и за трите.
Можете да направите първата скица и на лист. Напишете заглавието така, както бихте обяснили услугата по телефона. Под него сложете едно доказателство, което клиентът може да разгледа, и напишете какво ще се случи при натискане на бутона. Прочетете листа на колега от продажбите. Ако трябва да добави устно „всъщност цената е за двама“ или „ние работим само с фирми“, тази подробност заслужава място още в скицата.
1. Изберете шрифтовете с истинското заглавие на бизнеса
Във видеото дизайнерът избира първо шрифта за заглавията и след това съчетава тесния Instrument Serif с по-широкия Geist Sans. Това е добър подход за страница, на която няколко думи трябва да създадат първото впечатление. Изписано с широки, плътни букви, името на един архитектурен проект стои различно от същото име с тесен серифен шрифт. Изборът става по-лесен, когато пред вас е действителното име, заедно със снимката и краткото описание на проекта.
Имате три разумни варианта. С едно семейство шрифтове можете да изградите ясна йерархия чрез размер и дебелина. Голямо семейство със сродни серифни и безсерифни варианти дава повече разнообразие. А ако заглавията изискват собствен характер, съчетайте изразителен заглавен шрифт с по-спокоен за абзаците. Сложете ги един до друг с реален текст. Две почти еднакви начертания често изглеждат като случайна подмяна, докато отчетливата разлика обяснява кое е заглавие и кое е уточнение.
За български сайт първата проба е на кирилица. В демонстрацията Instrument Serif работи добре за голямо английско заглавие. Авторите на шрифта обаче описват латински набор от знаци. Ако използвате тази версия за „Проектиране на кухни по поръчка“, браузърът ще вземе липсващите български букви от резервен шрифт. На практика ще оценявате съвсем друга композиция.[2]
Преди да одобрите типографията, вижте на телефон най-дългото си заглавие, един нормален абзац, цена и надписа на основния бутон. Заглавие, което стои добре на два реда на компютър, може да заеме почти целия мобилен екран. Често най-добрата поправка е по-точна формулировка. Намаляването на буквите до неудобен размер само за да се побере старият текст рядко помага.
Как се проектира заглавие за сайт с над 600 000 статии
При редизайна на „Банкеръ“ прехвърлихме над 600 000 публикации от собствена платформа към WordPress. Обновихме тематичните раздели и дадохме на читателя избор кои категории да вижда. Един редакционен шаблон трябва да поеме и кратката новина от днес, и дългото заглавие от архива. Ръчно нагласените редове в три красиви демонстрационни карти дават малко информация за това как ще изглежда медията утре сутрин.[3]
Ако одобрявате подобен шаблон, дайте на дизайнера най-краткото и най-дългото реално заглавие от последната седмица, едно интервю с две имена и публикация без снимка. Поискайте да ги видите едновременно в списъка с новини и в самите статии. Особено показателни са заглавията, които се различават едва в края. Ако автоматичното съкращаване остави на екрана две еднакви изречения, читателят ще трябва да отвори и двете, за да намери търсеното. Поправката може да е допълнителен ред в картата, по-тясна колона със снимка или възможност редакторът да зададе по-кратко заглавие за списъка.
Има значение и как са отбелязани заглавията в страницата. Помолете екипа да ви покаже как изглежда списъкът им без оформлението. Има ли основно заглавие, от което става ясна темата? Под него следват ли раздели със смислени имена? Правилната последователност помага на хората, които се ориентират със софтуер за четене на екрана. Дизайнерът може да уголеми цитат или число, без разработчикът да го обявява за нов раздел в документа.[4]
За финал на типографската проба напишете на истински телефон име с „щ“, „ъ“ и „й“, цена със стотинки и дата с четирицифрена година. Виждат ли се точките, ударенията и десетичната запетая при обичайния размер? Изберете един абзац и го прочетете докрай, без да увеличавате екрана. Случва се шрифтът да е чудесен за пет думи върху плакат, а при по-дълъг абзац погледът ви да губи реда. Тогава запазете характера му в заглавията и дайте основния текст на шрифт, който се чете по-леко.
2. Дайте на първия екран един ясен визуален акцент
Когато всичко на страницата настоява да бъде видяно първо, посетителят сам трябва да реши кое заслужава внимание. Изберете водещ елемент според онова, което продавате. За мебелно ателие това може да бъде снимка на завършена кухня, на която личи как е решен труден ъгъл. За софтуер за сервизи може да е един екран, който показва как приета заявка стига до свободния техник. И в двата случая изображението казва нещо, което иначе ще трябва да обяснявате.
Да вземем за пример мебелно ателие, което изпълнява кухни за малки жилища. Заглавието „Майсторство във всеки детайл“ може да стои и на сайт за часовници. „Кухни по поръчка за малки апартаменти“ веднага определя за кого е услугата. До снимката бихме поставили „Разгледайте завършените кухни“. Ако ателието действително прави първоначални оценки по чертеж, след галерията вече има логично място за „Изпратете размери за оферта“. Така бутонът съответства на решението, което човек е готов да вземе в този момент.
Отворете началната страница на 88Lab и преценете сами. Разбирате ли веднага, че правим сайтове, платформи и дигитален маркетинг? Ако вече имате задача, можете да изберете „Обсъди проект“. Ако още ни преценявате, до него е „Разгледай проектите“. При превъртане виждате работата ни за CoolFit, Pulse Fitness & Spa, Apolonia Resort и „Банкеръ“, а по-надолу можете да проследите как минаваме от първия разговор до пускането на сайта. Този ред следва въпросите, които бихме очаквали от вас при първи разговор. С какво се занимавате? За кого вече сте го правили? Как бихме работили заедно? Едва след това бихме ви попитали дали харесвате дизайна и анимациите.
Как да изберете снимка, която отговаря на въпрос
Във видеото обектът е софтуер за управление на дейността на фирми за услуги. Авторът взема мотив от графиките в такъв продукт и го пресъздава с оранжеви вертикални линии. Така посетителят получава визуална представа за данни и подредба. При друг сайт същите линии биха били просто фон. За собствената си страница довършете изречението „Показваме точно това, защото клиентът иска да види…“. Ако отговорът е „че сме модерни“, все още имате работа по избора.[1]
За мебелното ателие бихме поискали два кадъра от една кухня. В първия се вижда цялото помещение и става ясно колко малко е то. Във втория отвореният шкаф показва как е използван трудният ъгъл. Сложим ли над втората снимка текст „Функционални решения“, връщаме на клиента задачата да отгатне какво гледа. С пояснение „Чекмеджето се отваря докрай, без да опира в съдомиялната“ снимката вече дава отговор, който купувачът може да пренесе в собственото си жилище.
Дайте и указание за кадрирането. Панорамна снимка на апартамент може да изглежда чудесно на лаптоп и да остави на телефона единствено празната стена между прозореца и леглото. Когато е достатъчна по-малка версия на същия кадър, разработчикът може да предложи на браузъра няколко размера чрез srcset и sizes. Когато предметът изчезва от кадъра, има основание за отделна мобилна композиция чрез picture. Предайте и двата одобрени изгледа. Така човекът, който качва следващата снимка, ще знае какво задължително трябва да остане видимо.[5]
Понякога най-добрият кандидат за водещото изображение отпада, щом смените контекста. Например снимка на лъскава заседателна зала не отговаря на въпроса дали софтуерът наистина може да покаже свободен техник. Малък, четлив откъс от работния екран с примерни данни би дал повече информация. Покажете само редовете, необходими, за да се разбере действието. Снимка на цял монитор, свита до ширината на телефон, запазва формата на продукта и губи почти всичко, което посетителят е искал да види.
3. Повтаряйте детайли, които помагат на човека да се ориентира
В записа това е наречено „визуална рима“. В демонстрацията дизайнерът повтаря триъгълника от логото в иконата за падащо меню, стрелката на основния бутон и контура на изображението. Отделните секции започват да изглеждат като части от един сайт. За бизнеса обаче най-полезното повторение е в елементите, с които посетителят работи. Ако веднъж е научил как изглежда бутонът за резервация, трябва да го разпознае и на страницата на конкретната стая.
Представете си хотелски сайт, на който запълненият зелен бутон води към свободните дати. В галерията същият зелен правоъгълник обозначава „Стая с гледка“, без да може да се натисне. Няколко реда по-надолу същата форма отваря снимка. Дизайнът формално е последователен по цвят, но е непоследователен по значение. Запазете най-отчетливия бутон за избраното действие и дайте на информационния етикет по-различен вид.
За бърза проверка съберете на един екран всички бутони, текстови връзки и етикети от началната страница. Кои изглеждат натискаеми? Кои действително са? После минете през страницата с клавиша Tab. Трябва да виждате къде е фокусът и да можете да достигнете до действията, които дизайнът така убедително показва.[6]
Кога да подредите сайта по аудитории и кога да свържете самите услуги
Работата ни по CoolFit и Pulse Fitness & Spa показва колко различни въпроси може да има човек към два сайта в един и същи сектор. Дигиталната спортна карта CoolFit събира три страни. Работодателят проучва придобивка за екипа си. Служителят вече има карта и търси къде да я използва. Собственикът на спортен обект иска да разбере как да стане партньор. Подредихме информацията според тези три роли, а за търсещите място за спорт предвидихме филтри по услуги и интерактивна карта.[7]
Представете си служител, който би плувал след работа, ако има подходящ басейн по пътя към дома му. Първо го интересуват местата, където картата му важи за плуване. После местоположението решава кой от вариантите ще избере. Същата карта с обекти има друго значение за човека, който договаря придобивката. Той може да се интересува дали колегите му от различни градове ще имат къде да спортуват. Полезно е двамата да достигат до една и съща информация от различни места в сайта. Така, когато се добави нов обект, и двете аудитории разполагат с актуалните данни.
При Pulse прехвърлихме съдържанието от стария сайт и изградихме връзки между клубове, тренировки и треньори. За намиране на обекти включихме карта и филтри.[8]
Тук един и същи посетител може да започне избора си от три места. Днес търси клуб близо до офиса, утре приятел му препоръчва инструктор, а след седмица иска да опита друга тренировка. Когато планирате подобна структура, вземете един конкретен въпрос. „Къде мога да тренирам с този инструктор?“ показва каква връзка е нужна на страницата на треньора. „Какво мога да тренирам в този клуб?“ посочва каква връзка трябва да има в обратната посока.
Проверете същия маршрут, като започнете направо от вътрешна страница. Човекът, който я е отворил от Google, е пропуснал обясненията на началната. Дайте му адреса на страницата за определена тренировка и го помолете да избере удобно място. Ако се върне в търсачката, попитайте какво е очаквал да намери. Възможно е градът да липсва до името на клуба или линкът към него да се губи сред снимките. Двете наблюдения водят до различни корекции.
Как да проверите филтрите и връщането към резултатите
Изберете комбинация, за която предварително знаете, че в каталога има поне два подходящи резултата. Дайте на участника ситуация, която има смисъл за него, например да избере между две места за плуване близо до работата си. Оставете го да отвори първия обект и да прецени местоположението му. После поискайте да види и втория. Проследете какво заварва, когато натисне „Назад“ на телефона. Останал ли е избраният вид спорт? Вижда ли отново мястото в списъка, от което е тръгнал? Запишете какво се е наложило да въведе или избере повторно. Обърнете внимание и дали разпознава обекта, който току-що е разглеждал. Две еднакви заглавни снимки могат да го накарат да отвори същото място втори път.
Направете и втори опит с комбинация без резултати. Човек, който държи на плуването, може да е готов да пътува до съседен квартал. Вижда ли кое условие да промени и може ли да запази останалите? Ако двама души се затруднят по различни причини, опишете всяка отделно. „Връщането от обекта изчисти избрания спорт“ дава на разработчика действие, което да повтори. След поправката минете по същия маршрут на същия телефон и проверете дали вече можете да сравните двете места.
4. Използвайте дълбочина и движение там, където имат задача
Дълбочина може да се създаде с едва забележима сянка, текстура, застъпване на два елемента или полупрозрачен фон. В падащото меню например лека сянка около списъка помага да видите къде свършва менюто и къде продължава страницата отдолу. В демонстрацията авторът добавя фина текстура към водещото изображение и пренася част от стъкления ефект върху картите. Водещият образ си остава разпознаваем.
Точно тук си струва да изпробвате неудобния случай. Полупрозрачна карта изглежда отлично върху предварително избрана тъмна снимка. Какво ще се случи, когато редактор качи светла кухня с бели шкафове? При мобилното изрязване заглавието може да попадне точно върху най-светлата част. Проверете и с такава снимка. Едно плътно поле зад текста може да реши проблема за всички следващи проекти.
При анимация си задайте въпроса какво трябва да чака човекът. Преходът между две снимки може да показва разликата между тях. Но ако посетителят чака буквите на заглавието да се съберат, за да разбере с какво се занимавате, най-важната информация се появява последна. Покажете я отначало. За хората, които предпочитат по-малко движение, предвидете спокойна версия. CSS настройката prefers-reduced-motion позволява сайтът да зачете предпочитанието на устройството. В края на нашата начална страница има и бутон „Намали анимациите“.[9][10]
Кога 3D анимацията има място в търговски сайт
За българския представител на American Pop Corn Company направихме сайт, в който при превъртане се движат триизмерна пуканка, надпис и продуктови опаковки. След тази сцена посетителят стига до каталог, информация за производство и доставка и възможност да изпрати запитване за избран артикул. Търговският партньор може да провери разфасовките, броя в кашон и данните за палетизация. Сайтът има и управление на декоративното движение.[11]
Този пример поставя добро условие пред всеки ефект. Представете си купувача на верига магазини, който харесва представянето и изпраща адреса на колега от логистиката. Колегата отваря линка с един конкретен въпрос за опаковката. Ако го принудите да изгледа цялото представяне при всяко посещение, ефектът се превръща в повтарящ се разход на време. За подобен проект бихме проверили две отделни задачи. Нов посетител успява ли да свърже запомнящия се обект с действителния продукт? Често връщащ се посетител успява ли да стигне направо до нужния ред в каталога?
За да оцените движението още преди програмирането, поискайте три кадъра. Какво се вижда преди началото, какво се разкрива по средата и с какво остава човекът накрая? Поставете до тях статичния вариант. Ако в него липсва съществено условие за покупка, намерете му постоянно място. Ако всичко важно вече се разбира, можете спокойно да прецените дали движението носи удоволствие или обяснява промяна. Така разговорът за анимацията става конкретен дори за собственика, който никога не е отварял софтуер за дизайн.
Проверете и междинното състояние на истински телефон. Превъртете бързо, върнете рязко нагоре, отворете менюто по средата на ефекта и след това завъртете устройството. Веднага ли се появява правилният текст? Стои ли бутонът на място, когато го докоснете? Изпробвайте същата последователност с включено намалено движение. Посетителят трябва да стигне до продукта и до действието и когато избере по-спокойно представяне. Това е работна проверка, която можете да повторите след подмяна на снимките или след добавянето на нова секция.
5. Изградете йерархия, без да жертвате четливостта
На продуктова страница името, цената, размерът и срокът за изработка имат различни роли. Името помага на клиента да се ориентира, размерът определя дали продуктът му върши работа, а срокът може да реши дали изобщо ще го поръча. Ако „Изработва се за 20 работни дни“ е изписано с бледосиви букви под голям бутон „Купи“, най-важното условие лесно ще остане скрито за човека, който избира подарък за следващата седмица.
Във видеото непрозрачността на подзаглавие е намалена до 70%, за да изпъкне заглавието. Резултатът зависи от началния цвят и от фона под буквите. Насоките за достъпност на уеб съдържанието (WCAG 2.2) определят за ниво AA минимален контраст от 4,5:1 за обикновен текст и 3:1 за едър текст. За едър се приема поне 18 pt обикновен или 14 pt удебелен шрифт. Например сивото #999999 върху бяло дава едва около 2,85:1. Същият надпис в #666666 върху бяло достига около 5,74:1. Така можете да запазите второстепенния текст визуално по-тих и достатъчно четим.[12]
Преди да изсветлите текста, пробвайте да намалите дебелината му, да го отделите с повече пространство или да преместите подробността до елемента, за който се отнася. Проверете екрана и с въпроса „Какво ще пропусна, ако го прегледам набързо?“. Бледият номер на снимката в галерията и бледият срок за доставка могат да изглеждат еднакво добре в макета. Последиците за клиента са различни.
Какво трябва да остане видимо от избора до потвърждението
В проекта ни за Ellie & Co посетителят персонализира плюшено слонче. Избира цвета, върху кое ухо да има надпис и как да изглежда той. Името или посланието се вижда направо върху продукта. Избраните детайли се запазват в количката, а крайната форма изпраща запитване до екипа. Клиентът получава потвърждение с референтен номер. Тук последното действие има много точен смисъл и не включва онлайн плащане.[13]
Представете си, че купувате подаръка за близнаци. Поставяте в количката две слончета с различни имена. Коя информация ще искате да видите, преди да изпратите запитването? Само две еднакви умалени снимки и обща сума едва ли ще ви успокоят. До всяка бройка потърсете собствения ѝ надпис, избрания цвят и начин да се върнете точно до нея за поправка. Такова упражнение разкрива какво трябва да е четливо на последния екран. Марката може да си позволи нежна типография, но името върху подарък за чуждо дете заслужава отчетлив преглед.
Има и йерархия на съобщенията. В момента на изпращане най-важният текст обяснява какво става със заявката. Ако полето за имейл е непълно, дайте указание близо до него, запазете попълнените стойности и оставете човека да поправи точно пропуска. При няколко грешки помага и обобщение с връзки към съответните полета. След успешното изпращане кажете какво сте получили и какво следва. „Получихме запитването за двете слончета“ е различно обещание от „Поръчката е платена“. Напишете съобщението според онова, което действително прави системата.[14]
За проба на малък екран изберете цвят, увеличете текста и опитайте да коригирате избора с една ръка. Малката мостра може да остане фина, а активната площ около нея да е по-голяма. Критерият на WCAG 2.2 за минимален размер на целта при посочване използва 24 на 24 CSS пиксела на ниво AA и предвижда изключения, включително при достатъчно разстояние между елементите. Визуален квадрат от 16 пиксела може да стои в по-широк бутон. Към избрания цвят добавете име или отчетлив знак, за да може клиентът да провери избора и при екран с намалена яркост.[15]
6. Сравнете различни решения, преди да одобрите едно
Ако дизайнерът ви покаже три варианта на една и съща страница с различен нюанс на зелено, можете да изберете любим цвят. Все още не знаете кое съдържание заслужава първия екран. В записа авторът разказва, че е изпробвал дванадесет варианта на основния визуален елемент. Това има смисъл, докато вариантите проверяват различни идеи. И два могат да бъдат достатъчни, ако изборът между тях променя нещо съществено.
При ателието за кухни първата версия може да започва със завършен обект и бутон към галерията. Втората може да показва как от размерите на помещението се стига до проект и да кани човека да изпрати план. Първата посреща клиента, който търси стил и доказателство за качество. Втората е подходяща за човек, който вече има размери и избира изпълнител. Преди да разработите която и да е, покажете и двете на хора, близки до вашите клиенти. Опишете ситуацията на участника със същите думи, които би използвал клиент. Ако кажете „отвори галерията“, вече сте направили първия избор вместо него. Ранното изпробване на различни решения е част от подхода на Design Council.[16]
Два първи екрана за една и съща почивка
За Apolonia Resort проектирахме мобилната версия, предвидихме възможност за запитване и интегрирахме резервационната система Quendoo.[17]
Как бихме сравнили две идеи за такава начална страница? За упражнението си представете две скици. В първата водеща е снимка на комплекса, под която стоят кратко описание и бутон „Разгледайте стаите“. Във втората използваме същата снимка, но оставяме повече място за избор на дати и брой гости. Под тях пише „Проверете наличността“.
Дайте на участник телефон с първата скица и конкретна задача. „Ще пътувате с партньора си и осемгодишното си дете от 12 до 16 юни. Искате да разберете дали можете да отседнете в една стая и колко ще струва целият престой. Покажете ми как бихте го проверили.“ Оставете го сам да избере откъде да започне. Ако веднага отвори снимките на стаите, вижте дали оттам може да провери конкретните дати. Отбележете момента, в който му се налага да се върне, и думите, които е очаквал да види на бутона.
При втората скица следете за друг проблем. Човек може лесно да намери календара и въпреки това да се откаже, ако при добавянето на дете не е ясно къде се посочва възрастта му. Същото важи, ако чак на следващия екран разбере дали вижда цена за стаята, за една нощ или за целия престой. Поправката в този случай е съвсем конкретна. Дизайнерът показва полето за възраст при избора на дете и поставя периода до сумата. След това проверява същата задача с друг участник. Накрая го моли да каже каква сума очаква да плати семейството. Така ще проличи дали е разбрал цената, дори да е преминал през всички полета без колебание.
Какво търси човекът, който още няма дати
За следващия участник сменете условието. „Обмисляте почивка с родителите си през лятото. Искате да им изпратите две подходящи предложения за настаняване, преди да решите кога да пътувате.“ Проследете дали посетителят намира стаите без избрани дати, как сравнява предложенията и какво се отваря, когато изпрати връзката на близките си. Ако календарът закрива целия екран на телефона и участникът реши, че трябва вече да знае датите, дизайнерът може да изведе видима връзка „Разгледайте стаите“ до формата. Ако споделената връзка води обратно към началната страница, всяко предложение има нужда от собствен адрес. И двете поправки следват от конкретна пречка в упражнението.
Какво се случва след изпращането на формата
Да вземем отделен учебен пример от сайт за услуги. На две случайно разпределени, сравними групи показваме различни версии на формата в един и същ период. Критерият за подходящо запитване е предварително уговорен с търговския екип и е еднакъв и за двете версии. В първата група от 1000 посетители 40 изпращат формата и 20 от тях търсят услуга, която фирмата предлага. Във втората от 1000 посетители 52 изпращат формата, а подходящите запитвания са 18.
Ако отчетем само изпращанията, втората версия води с дванадесет. От всички посетители обаче подходящо запитване са изпратили 2% при първата версия и 1,8% при втората. Тази малка разлика оставя въпроса за победителя отворен. Преди да сменим формата, има смисъл да прочетем какво са поискали хората в неподходящите запитвания. Може описанието да създава очакване за друга услуга. Това вече е обяснение, което можем да проверим със следваща редакция.
Как да проверите готовия сайт на телефон
Когато избирам дизайн, отварям сайта на телефона си. Гледам колко бързо се появява първият екран, какво разбирам от него и колко лесно мога да направя следващата стъпка. Ако проверявате страница с форма за запитване, опитайте да я попълните с една ръка. Достъпен ли е бутонът след появата на съобщението за бисквитки? Закрива ли клавиатурата полето? Вижда ли се потвърждението след изпращане? Бих отхвърлил и най-красивия вариант, ако той ме разсейва или ме кара да търся какво всъщност предлага фирмата.
Как да отделите бавния сайт от неясния дизайн
Засечете първо кога се появява основното съдържание. За тази цел има измерител LCP, който отчита кога се визуализира най-големият подходящ елемент в началния екран, често водеща снимка или блок текст. Ориентирът за добър LCP е до 2,5 секунди при 75-ия персентил на посещенията, като мобилните и настолните устройства се разглеждат отделно. Ако голямата снимка се зарежда късно, това е конкретна задача за оптимизация на скоростта.[18]
Ако измерването показва проблем, първо вижте кой елемент е отчетен като най-голям. Когато това е водещата снимка, проверете дали адресът ѝ може да бъде открит още в началния HTML и дали е маркирана за отложено зареждане. Последното е подходящо за много изображения по-надолу, но забавя снимката, която човек очаква веднага. За критично изображение има смисъл да се обмисли висок приоритет за зареждане. Даването на висок приоритет на всички снимки обезсмисля избора. Ако измерителят сочи текст, проверете кога се появява надписът и какво го задържа, преди да компресирате цялата галерия.[19]
За мобилното оформление отворете и страница с необичайно дълго съдържание. Проверете дали параграфите и обичайните контроли се побират при ширина 320 CSS пиксела. WCAG обяснява как съдържанието с вертикално четене трябва да се пренарежда, включително за хората, които увеличават изгледа. Елементи, чието значение зависи от двумерната им подредба, като някои таблици и карти, имат изключения. На практика е голяма разликата дали премествате широка логистична таблица в нейното поле, или целият сайт се плъзга наляво само защото едно заглавие излиза извън екрана.[20]
След като екранът вече се вижда, идва нашата трисекундна проверка. Покажете го за кратко на човек, който не познава фирмата. Приберете телефона и задайте два въпроса. „Какво предлага тази фирма? Какво би натиснал, ако ти трябва услугата?“ Отговорът „Видях кухня, която ми хареса, и бих разгледал останалите им проекти“ ви казва повече за качеството на началната страница от едно любезно „Много е модерна“.
Коя промяна да възложите първо
След прегледа вероятно ще имате бележки за шрифта, снимките, формата и още десетина детайла. За всяка запишете какво се опита да направи човекът и докъде стигна. Така може да дадете на екипа задача с ясен край.
Ако бюджетът този месец стига за една промяна, започнете от пречката, която спира изпълнението на основната задача. Когато няколко пречки имат сходни последици, проверете колко често се срещат и колко труд изисква всяка поправка. При проблем само на телефон вижте колко от вашите клиенти всъщност използват телефон и потърсете засегнатите модели. Дори краткият отчет „бутонът се закрива от клавиатурата при въвеждане на имейл“ е достатъчен за първа работеща корекция, ако включва страницата и устройството.
Преди следващото одобрение оставете компютъра и отворете началната си страница от телефона на човек извън екипа. Дайте му една реална задача и го оставете да я изпълни, без да му подсказвате. Мястото, където посегнете да му помогнете, е добро място да започне следващата редакция.
