Вправа. Що не так?

The Big Ugly Website

The World’s Worst Websitе

Lingscars

Internet Archaeology

Блог спеціаліста по феншуй Jami Lin

Penny Juice of America

 User Inyerface

University of Advancing Technology

ЕРГОНОМІКА РОЗМІЩЕННЯ ВІДОМОСТЕЙ НА ВЕБСТОРІНЦІ 10 клас

Сьогодні ми дізнаємось:03 Які сучасні тенденції вебдизайну?02 Що таке юзабіліті сайта?01 Що розуміють під ергономікою вебсайта?

Що розуміють під ергономікою вебсайта?

Вебдизайн англ. web design — галузь веброзробки і різновид дизайну, до завдання якого входить проектування призначених для користувача вебінтерфейсів для сайтів або вебзастосунків.

Дизайн вебсайту базується на законах: КомпозиціїКолористики. Ергономіки213

Ергономікагрец. έργος — праця і νώμος — закон— наука, яка вивчає робочі процеси з метою створення оптимальних умов праці, що сприяє підвищенню її продуктивності.

Ергономічний сайт має бути добре пристосований для зручної та безпечної роботи користувача.

Критерії оцінювання ергономічності вебсторінок0102030405 Ясність, структурованість, актуальність РОЗТАШУВАННЯ ВІДОМОСТЕЙ НА ВЕБСТОРІНЦІПростота, неперевантаженість. ЛАКОНІЧНІСТЬЗручність переходів, повернення на головну сторінку, зрозуміле меню, розмір кнопок. ЗРУЧНІСТЬ НАВІГАЦІЇЄдність стилю оформлення, кольори, якісні зображення. ОФОРМЛЕННЯЧас завантаження, оптимізовані зображення. ШВИДКІСТЬ ЗАВАНТАЖЕННЯ

Що таке юзабіліті сайта?

Юзабіліті англ. Usability — зручність використання— це підхід, покликаний зробити сайти простими у використанні для користувача, який не потребує додаткового навчання, тобто має бути орієнтованим на нього інтерфейс.

Jakob Nielsen. Нар. 1957 р."the guru of Web page usability" (The New York Times)Кожен витрачений на usability долар повертає від 10 до 100 доларів прибутку чи зекономлених коштів. Автор "10 евристик юзабіліті"

Інформування про стан системи. Система завжди повинна інформувати користувачів про те, що відбувається

Схожість системи з реальним світом. Система повинна розмовляти мовою користувачів: словами, фразами та поняттями, знайомими користувачеві

Свобода дій користувачів. Користувачі часто вибирають системні функції помилково, і їм знадобиться чітко позначений "аварійний вихід"

Подібність та стандарти. Користувачі не повинні запитувати, чи означають різні слова, ситуації або дії. Слід дотримуватись стандартів.

 Попередження помилок. Слід звести до мінімуму кількість умов, в яких можуть бути допущені помилки.

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

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

Естетичний та мінімалістичний дизайн. Діалоги не повинні містити інформації, яка не має значення або непотрібна. 

Розуміння проблем і їх вирішення. Повідомлення про помилки мають бути виражені простою мовою (без кодів), точно вказувати проблему та конструктивно пропонувати рішення.

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

Які сучасні тенденції вебдизайну?

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

Темний режим (dark mode) – це нова тенденція. Сміливі кольорові поєднання

Спліт-екран (розділений екран) є зручним інструментом просування контенту.(англ. Split screen) Поділ екрана передбачає певний взаємозв’язок контенту — доповнює або контрастує.

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

Інфографіка— спосіб подачі інформації за допомогою графічних елементів (діаграми, графіки, образи). Статистика на сайті перетворюється на візуально зрозумілу картинку з цікавим змістом.

Широкоформатні фонові фото і відео надають динаміку веб-ресурсу і допомагають занурити користувача в певну історію.

ІлюстраціїДизайн персонажівце візуальне пояснення, завдяки якому користувач краще розуміє ідею продукту. Розповідь

Ізометричні ілюстрації3 D ілюстрації

Анімований дизайн— графіка руху, моушн дизайн.

Синематограф (жива фотографія)— статична картинка з елементами анімації другорядних деталей.

Відео + анімовані ілюстрації (змішані медіа)

Практична вправа. Виберіть сайт і проаналізуйте його з точки зору юзабіліті. Відповіді занотуйте у звіт.

Завдання на самостійну підготовку. Складіть ілюстрований альманах, який буде допомагати зрозуміти критерії ергономіки сайта. Виконану роботу надішліть учителю на електронну адресу. Зразок альманаху