Уникайте незручних і складних макетів, віддаючи перевагу гнучким шаблонами, адаптивним до різного змісту. Якщо у вас вже є матеріали, і настав час для веб-редизайну, то контент-орієнтована стратегія для вас - даність. При редизайне сайтів під мобільні пристрої найкраще використовувати техніки адаптивного дизайну, засновані на оптимізації контенту під потреби користувачів.

Однак у великих компаніях, де над одним проектом можуть працювати кілька відділів паралельно, часто розробка макета починається до того, як стають відомі розміри контент-блоків. Або тому, що текст ще не був написаний, або тому, що аудит контенту проводиться паралельно розробці макетів. На жаль, коли форма і зміст об'єднуються, результат подібного підходу рідко виправдовує очікування.

Ви зіткнетеся з серйозними проблемами, для усунення яких доведеться або знову запускати процес редизайну, або відправляти добру частину контенту «під ніж», або ж з іншими державами радикальні кроки. Набагато простіше, дешевше і зручніше розробляти макет, виходячи із специфіки контенту. Тобто, або одночасно, або після створення матеріалів.

CNN використовує жорстку сітку. Хоча в даному випадку це виглядає непогано, але постійне скорочення або зміна контенту для відповідності розмірам сітки обіцяє надто багато клопоту.

Мінуси макет-орієнтованого підходу

порожні плейсхолдери

Шаблон або CMS може містити так звані «наповнювачі», або плейсхолдери, зазвичай не відображаються на сторінці і потрібні тільки на етапі розробки. Заповнення їх випадковим контентом при проектуванні може призвести до порожніх місцях, «білих плям» на готової сторінці - якщо у вас просто не вистачить контенту, або він виявиться трохи іншого формату.

Невірно підібрана «консистенція» контенту

Коли макет розробляється без врахування контенту, можуть виникнути й інші непорозуміння. Ви ризикуєте отримати сторінки з нерелевантних, або ж надмірним вмістом. Наприклад, якщо шаблон має три шари для заголовків, а у вас тільки дві статті, це не означає, що вам треба дублювати один із заголовків тільки заради заповнення макета. Однак, сторінка в будь-якому випадку буде виглядати непривабливо, з «зяючим» порожнім простором, або ж з «подвійним» назвою.

При виникненні подібних проблем міняйте шаблон, наскільки це можливо - щоб не допустити ситуацій, як на прикладі вище.

Словом, уникайте «тиранії» плейсхолдеров. Такі підходи приносять більше проблем, ніж користі.

проблеми масштабування

При зміні масштабу елементів ви можете помітити, що розмір контенту не відповідає простору, в яке той повинен бути поміщений. Перелічимо основні проблеми:

Обсяг контенту занадто великий або малий для наданого простору, що викликає проблеми зі сприйняттям і юзабіліті. Зображення «проривають» рамки каркасних елементів, або погано виглядають. Розмір блоків в такому випадку може бути зменшений для кращої читання і оптимального користувальницького досвіду.

Часто необхідність редизайну викликається саме проблемами з масштабністю. Але якщо не переглянути макет, то призначений для користувача досвід сильно ускладниться, буде обтяжений великою кількістю обхідних шляхів, настільки ж марним і небажаних, як величезний комод посеред вашої кімнати.

The NZ Herald (див. Скріншот вище) використовує гнучкий вертикальний макет, де стовпчики не прив'язані один до одного по висоті. Такий підхід дозволяє повністю розмістити синопсис і підпис до фото, незалежно від обсягу тексту.

непередбачені обмеження

Іноді плейсхолдери розробляються, виходячи з передбачуваних шаблонів макета. Ці ранні припущення про те, як повинен виглядати ресурс, можуть стати штучними обмеженнями на пізніх етапах. Ось кілька прикладів:

• Всі підписи до зображень повинні бути довжиною в два рядки;
• Блок з коротким резюме - один пункт в п'ять ліній;
• З вини відсутнього контенту залишаються порожні сторінки, які необхідно перегортати;
• Пункти меню або заголовки можуть містити одне або два слова, але не три або більше;
• Ширина стовпців не може бути змінена без порушення інших елементів сторінки;
• Зміна розміру шрифту «ламає» весь дизайн сторінки.

Проблеми з рекламою

Рекламні блоки розміщуються в самих різних місцях ресурсу, і часто змінюють розміри. Свого часу всі оголошення були горизонтальними прямокутниками, але пізніше рекламодавці стали звертатися до безлічі різних форматів. Іноді вони перекривають сторінку, іноді - розміщуються внизу. Банери можуть виникати збоку, знизу, зверху, пропливати по сторінці зліва вниз - варіантів безліч, і за всіма неможливо простежити. Рада дизайнерам тут буде вкрай простий - не варто вибудовувати макет «навколо» рекламних банерів.

Крім усього іншого, реклама часто намагається «замаскуватися» під контент або наблизитися до нього. Банери можуть підстерігати користувачів у смуги прокрутки, в надії зловити неакуратний клік по порожньому простору. До речі - не намагайтеся обманювати користувачів неохайними методами розміщення реклами, адже це вірний спосіб втратити відвідувачів.

Рекламні оголошення - не найважливіший тип контенту. Деякі макети виглядають безглуздо навіть без реклами, а з банерами ситуація погіршується багаторазово. Розробляючи макет під рекламу, ви, ймовірно забудете про те, для чого відвідувачі і приходять - про контент і його якісному відображенні.

До того ж, велика кількість інтернет-реклами змінило сприйняття користувачів. Ми звикли ігнорувати рекламні блоки, розвинувши так звану «банерну сліпоту». Тому розміщення реклами поруч з важливим контентом може привести до зворотного ефекту - люди можуть проігнорувати елемент біля банера, так як він потрапить в поле «сліпоти». Словом, не варто замислюватися про форматах рекламних блоків, поки ви не пропрацювали питання з основним контентом.

Отже, що робити?

Проектування гнучких макетів. У сучасному світі, здавалося б, про це ніяково навіть говорити, але всі ми до сих пір зустрічаємо безліч «жорстких» макетів на різних ресурсах. Найрізноманітніші формати екранів змушують розробників використовувати принципи адаптивного дизайну. Такі підходи до розміщення контенту більш витончені, проте навіть вони не позбавлять вас від необхідності тестів макета з актуальних контентом.

Для створення гарного користувальницького досвіду ваші макети, елементи навігації і текстові блоки повинні бути гнучкими і адаптивними - як в процесі проектування, так і при розміщенні контенту.

Використовуйте прогресивні принципи дизайну для підвищення доступності та крос-платформної сумісності.

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

Якщо у вас поки немає контенту, скопіюйте його з схожих джерел для заповнення каркаса і опрацювання прототипів. Ви навіть можете роздрукувати тексти, зображення, вирізати ці матеріали і представити зовнішній вигляд ресурсу прямо на своєму столі, щоб краще зрозуміти, який макет краще підійде для відображення необхідного контенту, а також який тип матеріалів допоможе зробити ресурс більш популярним і конкурентоспроможним.

Якщо ви вирішили використовувати плейсхолдери, то звертайтеся до них тільки на самих ранніх етапах проектування.

Створіть план, що охоплює будь-які передбачувані події майбутнього. Можливо, ваш проект проживе кілька десятиліть - хто не мріє про таке? Щоб домогтися цього, підготуйтеся - запитайте себе, як повинні виглядати макети, який тип контенту буде краще, і як оптимізувати дизайн в плані адаптивності, якщо очікуваний обсяг трафіку збільшиться в кілька десятків разів. Що стане з вашим ресурсом, коли люди, скажімо, перейдуть з «фаблет» на мініатюрні смарт-годинник? Або коли третина ваших клієнтів складуть китайці, а третина - вихідці з Індії? Будьте готові до найрізноманітніших змін в сегментах аудиторії і в призначеному для користувача поведінці.

Враховуйте тренди в плані типів контенту і розмірів дисплея, поряд зі способами перепрофілювання матеріалів. Жорсткі макети фіксованої ширини повинні піти в минуле.

Плануйте масштабування. Намагайтеся не обмежувати довжину тексту або число елементів сильніше, ніж це необхідно. Закладіть можливість застосування великих шрифтів і збільшення масштабів для всього, особливо для елементів навігації.

Документуйте свої дизайн-рішення. Ясно викладіть дизайнерські допущення і компроміси, щоб всі зацікавлені сторони могли зробити правильний вибір: скорочувати й оптимізувати контент під макет, або приділити додатковий час більш універсальним дизайн-конструкціям.

Починайте тестувати рано і робіть це часто. Почніть з першого варіанту макета, тестируйте його з реальним контентом, переглядайте конструкції, стратегії і т. Д.

Пам'ятайте про можливі проблеми з розміром контенту і його розміщенням:

• фіксована ширина всіх елементів;
• елементи, облягаючі текст;
• аспекти співвідношення тексту і відео на ресурсі;
• ілюзія заповнення (false floors), викликана горизонтальними елементами;
• контент, що виглядає обмеженим на ресурсі;
• клікабельні елементи позбавлені достатнього простору, що погіршує UX на тачскрін.

Перевірте, що з макетами все в порядку, коли:

• росте число або довжина елементів навігації;
• контент зачитується вголос відповідним софтом;
• сторінки проглядаються з декількох пристроїв, в числі яких мобільні;
• змінюється розмір або форма різних типів контенту (реклама, відео, текст);
• відключені JavaScript, Flash і веб-шрифти;
• форми, квитанції та інші важливі елементи друкуються.

Протестуйте «крайні» варіанти. Варто також перевірити, як виглядають макети з нестандартним розташуванням контенту або підходом до конструкції. Маленькі, великі, дуже довгі сторінки, Лендінзі, заповнені зображеннями або текстами, графіками, діаграмами, інфографіка та т. Д. Протестуйте довгі заголовки, разноформатні списки і цитати, всі типи банерів, СТА-форм і багато іншого.

Перевірте свої макети на максимально можливій кількості платформ і форматів екрану. Хоча і не завжди можливо обійтися однією версією для всіх пристроїв, але через грамотну оптимізацію контенту і дизайну ви цілком можете досягти цього.

Нагадування про різноманітність розмірів екрану на Android-пристроях. Вражаючий розкид, чи не так?

Переведіть тексти і заголовки на різні мови, щоб побачити недоліки макетів. Візьміть оригінальний текст і переведіть його на інші мови, з різними знаковими системами: німецька, китайська, грецька, вірменська, корейський та інші. Просто для того, щоб побачити результат - де саме ваш макет зіб'ється, які недоліки будуть виявлені і т. Д. Така вправа - прекрасний тест на підгонку конструкції і на виправлення неочевидних прорахунків.

До того ж, багато відвідувачів ресурсів користуються онлайн-перекладачами (наприклад, Google.Translate). Яким стане ваш сайт після автопереводов на грецький або ісландський? Чи не зіб'є це всю довгу і делікатну роботу? Подбайте про подібні моменти.

замість висновку

Зрозуміло, вам навряд чи вдасться домогтися ідеального відображення макета на всіх платформах і розмірах екранів, від умовних розумних годин до широкоформатних смарт-ТВ з функцією 3D. Але прагнути до ідеалу все одно варто, адже так ви все щільніше будете наближатися до створення максимально зручних і корисних макетів, придатних до використання довгі роки, незалежно від зміни користувальницьких звичок.

Оптимізація макетів в процесі проектування заощадить вам багато часу, грошей і зусиль, позбавивши від необхідності редизайну в майбутньому.

Високих вам конверсій!

За матеріалами: nngroup.com

01-04-2016