Дизайн веб-сторінки, натхненний Едвардом Тафтом

Оригінал: https://staff.washington.edu/larryg/Classes/Rinflux/zz-influx.html

Покажчик

Питання: Які проблеми з робіт Едварда Тафті актуальні для веб-сайту?

Питання: Які веб-сайти ви рекомендуєте з точки зору змісту, графічної відповідності, естетики та ефективності, і чому?

Питання: Як сайт може бути ефективним, цікавим і привабливим як для користувача Інтернету, так і для досвідченого користувача?

Питання: Чи повинен сайт бути красивим, щоб бути ефективним?

Питання: Як розмір і роздільна здатність екрана впливають на графіку в Інтернеті, і як створити ефективну графіку за цих обмежень?

Питання: Які нові можливості відкриває дизайн веб-технологія?

Питання: Які найпоширеніші помилки веб-дизайну?  
 

(З) Які проблеми з робіт Едварда Тафті мають відношення до веб-сайту?

Проблеми, які я вважаю найбільш актуальними, це:

• Вихідні носії: якщо друковані копії розробляються з урахуванням конкретного носія, то веб-контент може відображатися на пристроях з різними характеристиками — розмірами, роздільною здатністю, або навіть типом носія (потужні робочі станції, невеликі ноутбуки, КПК, шрифт Брайля, розмовні слова тощо).
• Очікування користувачів: Інтернет-користувачі сприймають інформацію інакше, ніж на папері. Вони зазвичай сканують текст, а не читають його уважно.
• Ергономіка: сучасна технологія перегляду веб-сторінок багато в чому поступається друкованій копії. Дисплеї мають низьку роздільну здатність, позиція перегляду фіксована, а навігація за допомогою миші чи клавіатури може бути менш інтуїтивною порівняно з традиційним читанням.
• Простір вмісту: більшу частину простору веб-сторінки займають меню, панелі інструментів і елементи керування навігацією, таким чином зменшуючи доступний простір для основного вмісту на веб-сторінці.
• Орфографічні помилки: вони призводять до фактичної невдачі навігації та пошуку на відміну від простого збентеження чи плутанини.
• Конвертація в друкований формат: часто виникають проблеми, пов'язані з відсутністю потрібних шрифтів, проблемами з графікою, розмірами або макетом сторінки.
• Непорядок та помилкова інформація на діаграмах: враховуючи невисоку роздільну здатність більшості сучасних дисплеїв та мерехтіння старих електронно-променевих дисплеїв, різні візуальні недоліки, такі як муар, можуть бути ще більш виражені, ніж на друкованих матеріалах. Це призводить до того, що користувач втомлюється або плутається в інформації.
• Кольори: через те що більшість дисплеїв мають обмежену роздільну здатність, а кольори в інтернеті легко доступні та не вимагають додаткових витрат, їх можна ефективно використовувати для підсилення повідомлення (наприклад, виділяючи елементи однієї категорії однаковим кольором). Однак, існує і ризик їхнього неправильного використання, що у свою чергу викликає спантеличеність.
• Документування інформації: Оскільки публікація в інтернеті значно легша, ніж в друкованих виданнях, і пошукові системи часто орієнтуються на ключові слова для індексації вмісту, існує велика ймовірність зіткнутися з неточною чи помилковою інформацією в мережі. Я вважаю, що в майбутньому буде важливо впровадити систему сертифікації веб-сайтів для гарантії якості інформації, а також щоб пошукові системи враховували цю сертифікацію при виведенні результатів.
• Щільність інформації: через невелику роздільну здатність екранів та затримки при завантаженні великих файлів, в Інтернеті менш доцільно використовувати дуже щільну інформацію. Щоб компенсувати цей момент, можна застосовувати такі підходи як анотація розміру файлів і їхнього часу завантаження, вибір графіки з різним рівнем роздільної здатності, використання ескізів і/або обрізаних зображень, які які при кліку відображають версію мініатюри з високою роздільною здатністю тощо.
• Текст проти графіки: Завдяки факторам, таким як час завантаження, обмежені можливості браузерів та проблеми з роздільною здатністю, текст часто виграє у протистоянні з графікою в онлайн-форматі.
• Послідовне та гештальтне розуміння: Тафт стверджує, що щільна графіка на папері дозволяє сприймати комплексні зображення як єдину структуру. Однак інтерактивні веб-дисплеї можуть вести вас послідовно через кроки, які відкривають вам лише контекст, який вам потрібно знати на основі ваших попередніх виборів, скоріше як візуальне дерево телефонів. У деяких випадках це ефективніше, ніж дисплей з високою щільністю, в інших – навпаки.
• Збереження контексту: заблукати легше у мережі, ніж у книзі, адже є безліч шляхів, якими можна рухатися. Тому якісні інструменти навігації в Інтернеті є набагато більш важливими, ніж у паперовому форматі.

(З) Які веб-сайти ви рекомендуєте з точки зору змісту, графічної релевантності, естетики та ефективності, і чому?

Серед сайтів, які мені найбільше подобаються:

• Сайт NASA Skywatch доступний за адресою: http://spaceflight.nasa.gov/realdata/sightings/index.html.  
  Він пропонує відвідувачам інформацію про численні великі супутники, що обертаються навколо Землі. Головна сторінка детально описує мету сайту як у текстовому, так і у мультимедійному форматах. Тут є обговорення ресурсів, а також вказано рекомендації до часу завантаження та розміру файлів. Зручний дворівневий інтерфейс навігації допомагає легко переходити між різними розділами ресурсу NASA.  
  Java-аплет на сайті надає відвідувачам докладну інформацію про розташування супутників та їхні орбітальні траєкторії. Ця інформація корисна як для фахівців у галузі аерокосмічних технологій, так і для загальної публіки. Інтерактивні таблиці та кольорові карти з наочними позначеннями орбіт відносно зірок і сузір'їв роблять використання ресурсу простим, привабливим та інформативним.
• Один із сайтів, який заслуговує уваги, – це http://www.nsf.gov. Його домашня сторінка відрізняється простотою дизайну: вона завантажується швидко, містить мінімум графіки та дуже інтуїтивно зрозуміла. Він також містить відмінний дворівневий елемент керування навігацією, контактну інформацію, інформацію про конфіденційність, довідку та налаштування, інструмент пошуку та вибір категорії глядача (студенти, викладачі, головні дослідники). Користувачі можуть обирати формат відображення інформації: HTML, звичайний текст або PDF. Однак слід зауважити, що не всі сторінки мають однаковий дизайн і елементи навігації домашньою сторінкою. 
• Деякі надзвичайно інформативні графіки можна знайти, натиснувши на «Карту ринку» за адресою: http://www.smartmoney.com/maps  
  Хоча спочатку він відкривається з нав’язливою та дратівливою рекламою, яка залишається на екрані тривалий час і не дає вам жодного уявлення про те, що відбувається далі, результат того вартий. Він містить наочне представлення багатьох акцій, згрупованих за секторами та кольоровими блоками. Розмір кожного блоку відображає частку акцій на ринку, а відтінок і інтенсивність показують ефективність цих акцій: наприклад, яскраво-червоний показує, що акції компанії впали, чорний - що акції залишаються без змін, а яскраво-зелений - що зросли. Вже за допомогою одного погляду на екран можна зрозуміти загальну ситуацію на ринку. Наприклад, сьогодні я бачу, що технологічні акції зазнали збитків, у той час як акції енергетичних компаній і товарів широкого вжитку зросли. Я можу переглянути сектор більш детально, можу навести курсор миші на область, щоб визначити конкретну акцію та отримати деяку інформацію про її ефективність, а також можу натиснути на акцію, щоб отримати детальну інформацію. Він також містить панель, яка дозволяє налаштувати карту. Це дійсно вражаючий інструмент для візуального аналізу ринку акцій.

(З) Як сайт може бути ефективним, цікавим і привабливим для звичайних користувачів Інтернету, а також для досвідченого користувача?

Хороший веб-сайт має включати наступне:

• Він базується на дизайні, орієнтованому на користувача (на відміну від корпоративної, структурної чи будь-якої іншої точки зору), перевіреному користувачем.
• Його початкова сторінка містить простий низькотехнологічний HTML, який швидко завантажується, не потребує плагінів, працює майже в усіх браузерах, розміщує найважливішу інформацію вгорі та одразу повідомляє людям:
  • які предмети він охоплює або які питання розглядає
  • чи має інформацію, яку вони шукають
  • чи інформація актуальна (наприклад, дата останньої зміни)
  • докази того, що інформація точна.
• Початкова сторінка має ідентифікаційний логотип і містить або має посилання на:
  • карту сайту
  • контактну інформація
  • відомості про відповідальну організацію
  • форму зворотного зв'язку на сайті або посилання на дискусійну групу
  • гарантії безпеки та конфіденційності
  • пов'язані сайти
  • інформацію про технологію, необхідну для перегляду наступних сторінок сайту (наприклад, версії браузера, необхідні завантаження, розміри файлів або час власного завантаження).
• Наступні сторінки сайту мають багато властивостей головної сторінки, а також:
  • коли переходите з головної сторінки сайту на інші, ви помічаєте, що вони зберігають однаковий стиль дизайну. Це забезпечено завдяки зовнішнім таблицям стилів, які забезпечують узгоджений зовнішній вигляд: від розташування логотипу до іншої ідентифікаційної інформації.
  • забезпечити узгоджені елементи керування навігацією, які виглядають однаково та знаходяться в тому самому місці, наприклад кнопки «Далі», «Попередній» і «Домашня» (особливо уникайте сторінок, на яких кнопка «Назад» не працює)
  • відображення контексту та розташування: на складних сайтах дуже важливо знати, де ви знаходитесь і де ви були. Незважаючи на те, що фрейми створюють серйозні проблеми із зручністю використання, вони іноді використовуються для забезпечення змісту, який залишається постійним на всьому сайті. Наприклад, прості та логічні URL-адреси з простими словами та без символів можуть вказувати вам, де ви зараз перебуваєте. Іноді використовують деревоподібні структури, щоб показати поточне місцезнаходження користувача
  • належним чином керуйте вікнами: велика кількість вікон, які залишаються навколо, спричиняє безлад і плутанину (а також ризики безпеці, якщо користувач робить більше, ніж серфінг). Але вікна, які автоматично закриваються самі, можуть налякати та заплутати користувача: веб-дизайнер повинен зважити це питання на основі обставин, які застосовуються
• Усі сторінки використовують:
  • приглушений фон, який не заважає накладеній інформації
  • хороший контраст між фоном і текстом або елементами керування
  • яскраві кольори, щоб виділити важливий вміст
  • однаковий колір для всіх елементів, які належать до однієї категорії
  • текст, якщо тільки графіка не надає справжньої переваги
  • видима структурна інформація, така як заголовки, підзаголовки та марковані списки замість довгих абзаців
  • пробіл як основний роздільник
  • суттєво зменшений текст порівняно з паперовою копією
  • перевірку орфографії для забезпечення роботи функцій навігації та пошуку.

(З) Чи повинен сайт бути красивим, щоб бути ефективним?

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

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

Повернутися до покажчика

(З) Як розмір і роздільна здатність екрана впливають на графіку в Інтернеті, і як створити ефективну графіку за цих обмежень?

Це дуже важлива тема, і, можливо, вона є причиною основних відмінностей між веб-дизайном і паперовим дизайном:

• Відмінності у розмірі: якщо говорити про "традиційні" комп'ютери і дисплеї, то розмір екрану не має особливого впливу на сприйняття графіки (на відміну від роздільної здатності). Наприклад, площа 19-дюймового екрану всього в 2,5 рази більша, ніж у 12-дюймового. Однак сьогодні на ринку з'являється все більше мініатюрних пристроїв, як-от КПК, мобільні телефони та навіть годинники з інтернет-оглядачами, і їхні екрани вже в 100 разів менші. Стандартні веб-сторінки просто не адаптовані для таких маленьких дисплеїв. Тому нам потрібно спеціально пристосовувати дизайн під них, і тут може пригодитись XML/XSL для оптимізації контенту.  
  У порівнянні з великими розкладними картами або сторінками, які дозволяють легко охопити велику територію, веб-переглядач покладається на посилання на кілька сторінок, які містять частини перегляду, тому загальний контекст втрачається – будь-хто, хто використовує карту типу книги знає, як важко йти маршрутом, який перетинає різні сторінки. Подібним чином, порівняння у великій науковій діаграмі дуже важко зробити, коли глядач не може побачити все це відразу.  
  Крім того, сучасні рідкокристалічні екрани мають обмежені кути огляду, тому, навіть якби вони були великими або з високою роздільною здатністю, вони ускладнили б розуміння на великих площах.
• Відмінності в роздільній здатності: вони навіть важливіші, ніж розмір. Теоретично навіть сторінка, призначена для 20-дюймового дисплея, поміститься на дисплей наручного годинника, якби роздільна здатність була такою самою. Але екрани з низькою роздільною здатністю не тільки змушують користувача прокручувати сторінку горизонтально, але й можуть не відобразити основні її частини.  
  Порівняно з паперовою версією дисплеї, які сьогодні широко використовуються, мають роздільну здатність у п’ять-десять разів меншу. У результаті деталізація груба, дрібний текст слабкий і нечіткий, а перегляд втомлює, особливо коли екран мерехтить. Крім того, втрачається загальний контекст, що змушує користувача запам’ятовувати та з’єднувати інформацію з попередніх екранів, до чого людський розум погано пристосований.  
  З іншого боку, Інтернет пропонує інструменти, які частково компенсують це:
  • незважаючи на певні недоліки зручності використання, особливо щодо навігації, можна використовувати рамки для відображення загального вигляду сцени в одному кадрі у формі мапи зображення, яку можна натиснути: коли користувач клацає область на оглядовій карті, висока роздільна здатність у 2-му кадрі з’являється частина зображення. Це стає набагато інтуїтивнішим, якщо область, яку користувач вибрав на оглядовій карті, підсвічується, і якщо ця карта надає різні масштаби та зори, дозволяючи користувачеві зрозуміти загальний контекст.
  • іноді анімацію можна ефективно використовувати замість «маленьких кратних»: плавне зображення, яке швидко змінюється, особливо коли воно знаходиться під повним контролем користувача, часто може передавати інформацію краще, ніж статична сторінка високої роздільної здатності
• Однак зауважте, що переваги паперу в розмірі та роздільній здатності над дисплеями зникнуть через 5-10 років: на ринку вже є двомегапіксельні РК-екрани на ноутбуках; IBM нещодавно представила 22-дюймовий РК-дисплей із дивовижною роздільною здатністю 9 мегапікселів, який цілком може конкурувати з друкованою сторінкою (наразі він дуже дорогий, але, безсумнівно, впаде в ціні), а субпіксельна технологія Miscosoft ClearType (TM) значно підвищує ефективну роздільну здатність тексту. і чорно-білі зображення, іноді на 300%.  
  Крім того, нові РК-дисплеї мають ширше поле зору, і вони не мерехтять. У найближчому майбутньому планшетні комп’ютери зі стилусом можна буде тримати та використовувати так само, як журнал, вони будуть кращими для вказівки, малювання та письма, ніж миші та клавіатури, і будуть розширені голосовим та аудіо введенням/виводом. Розробляються дуже великі екрани, а також ретинальні дисплеї для портативних комп’ютерів, що забезпечують справжнє стереоскопічне зображення високої роздільної здатності, ширина якого здається користувачеві 6 футів.

(З) Які нові можливості відкриває дизайн веб-технологія?

Інтернет може забезпечити багатше інформаційне середовище, ніж це можливо зі статичними сторінками на папері, наприклад:

• Актуальна інформація: веб-інформація може бути не тільки актуальнішою, ніж друкована копія, але й миттєвою, як у випадку з веб-камерами про дорожній рух, бронюванням квитків, звітами про акції, показниками GPS тощо.
• Керована користувачем анімація: невеликі кратні зазвичай використовуються для імітації анімації на папері, але Інтернет пропонує набагато більше можливостей, таких як:
  • рух у реальному часі
  • керування користувачем швидкістю та напрямком (вперед і назад)
  • анімація вибраних користувачем підмножин, щоб можна було спостерігати певні переходи з різними швидкостями та напрямками
  • стоп-кадри, які захоплюють один або кілька кадрів в анімації
  • реакція в режимі реального часу на вхідні дані від користувача або зовнішніх джерел
• 3D-графіка: часто важко знайти правильну точку огляду для складних 3D-сцен на папері, оскільки будь-яке окреме подання або навіть набір подання може приховати або спотворити важливу інформацію. Але візуалізація 3D-даних в Інтернеті, яка забезпечується VRML або іншими програмами, дозволяє користувачеві переглядати дані під будь-яким кутом. Багато років тому я бачив глибоку демонстрацію JW Tukey, який досліджував багатовимірні (10-12 вимірів) набори даних в інтерактивному режимі. Спочатку все, що з’являлося, були випадковими безглуздими крапками, але коли він згортав дані вздовж певних розмірів і застосовував обертання, з’являлися сильні та прості криві, які ілюстрували важливі взаємозв’язки.  
  Хоча це правда, що сьогодні контролювати 3D-об’єкти дещо складно, оскільки ми зазвичай робимо це за допомогою миші на 2D-поверхні, у найближчому майбутньому це стане легше завдяки привабливим і легким гарнітурам, які пропонують справжній стереоскопічний зір у поєднанні зі стереокамерами, які відстежують положення рук у 3D, дозволяючи нам "захоплювати" 3D-зображення та маніпулювати ними так само легко, як ми це робимо з об’єктами реального світу.
• Графіка високої щільності: хоча друкована копія пропонує вищу роздільну здатність, ніж поточні дисплеї, певні веб-технології дозволяють збільшити масштаб для перегляду наборів даних набагато детальніше, ніж це можливо на папері.
• Дослідницький аналіз даних: Інтернет дозволяє не тільки переглядати, але й маніпулювати та застосовувати перетворення до даних, щоб виявити зв’язки, які ніколи не можна спостерігати на папері
• Універсальні інформаційні пристрої: Інтернет, особливо через бездротовий доступ, може об’єднати всі форми інформації, які сьогодні надаються різними пристроями: годинники, будильники, радіо, телевізори, газети, журнали, книги, компакт-диски, комп’ютери, відеоігри, юридичні, фінансові та медичні записи, ліцензії, дозволи, класи, театри тощо.

(З) Які найпоширеніші помилки веб-дизайну?

Серед найбільш неприємних дефектів дизайну, які я часто бачу, є:

• Відсутність інформації про дату/час: більшість інформації певною мірою є мінливою. «Дата останньої зміни» є важливою для більшості сайтів, і будь-які залежні від часу дані на сторінці потребують документації часу
• Заплутана навігація, вікна, які вимикають навігацію, або забагато спливаючих вікон
• Початкові сторінки, які завантажуються надто повільно або вимагають плагінів або виняткових ресурсів, або сценаріїв, які вимикають браузери
• Відсутність інформації про сайт, такої як карта сайту та контактна інформація
• Безлад у вигляді заплутаного макета, довгих абзаців, графіки, що відволікає увагу, яскравого фону, непослідовного використання кольорів (різні кольори в одній темі або той самий колір для різних тем), муарові візерунки
• Нечутливість до технічних або користувацьких обмежень: веб-сторінки повинні надавати альтернативні ресурси для перегляду для тих, хто має обмежені браузери, комп’ютери або фізичні обмеження.