Вэб-старонка дызайн, натхнёны Эдвард Тафта
Індэкс
(Q) Якія пытанні ад спраў Эдвард Тафта, якія маюць дачыненне да вэб-сайт?
Пытанні, якія я лічу найбольш важнымі з'яўляюцца:- Выхадны СМІ: друкаваныя пісьменнікі ведаюць іх СМІ мэта, але вэб-кантэнту можа быць вынесенае на радыкальна розных прылад з пункту гледжання памеру, дазволу, і нават тып носьбіта сябе (высокапрадукцыйных працоўных станцый канца, невялікія наўтбукі, КПК, шрыфт Брайля, вымаўленыя словы, і г.д.)
- Чаканні карыстальнікаў: вэб-карыстальнікаў падыход інфармацыю інакш, чым на паперы, і, хутчэй за ўсё, сканіраванне інфармацыі, чым чытаць
- Эрганоміка: сучасныя тэхналогіі для прагляду вэб-старонак значна саступае друкаванай ў многіх адносінах. Дысплеі з нізкім дазволам, прагляд становішча фіксаванае, і мыш / клавіятура кіравання вельмі нязручны ў параўнанні з алоўкам і паперай
- Змесціва прасторы: большая частка вэб-прасторы старонкі займаюць меню, панэлі інструментаў і элементы навігацыі, тым самым памяншаючы прастору для ўтрымання
- Арфаграфічныя памылкі: гэтыя прычыны фактычнага правалу навігацыі і пошуку, а не проста збянтэжанасці ці збянтэжанасці
- Пераўтварэнне ў друкаваных: гэта часта не з-за адсутнасці шрыфтоў, якія адсутнічаюць графічных пераўтварэнняў, а таксама памер і праблемы макета старонкі
- Барахло дыяграмы і рас-інфармацыя: нізкае дазвол бягучых адлюстроўвае ў спалучэнні з мігаценне ЭПТ-манітора азначае, што беспарадак і муар адняць яшчэ больш ад адлюстравання, чым на паперы і спрыяюць стомленасці і разгубленасці.
- Колеры: нізкае дазвол дысплеяў і лёгкасць і нулявой кошту колеру азначае, што колеры могуць быць выкарыстаны для больш эфектыўнай перадачы інфармацыі (напрыклад, калі ўсе элементы на адзіную акцыю тэму аднаго колеру) або могуць быць выкарыстаны і для пагоршыць блытаніну.
- Дакументаванне дадзеных: таму што гэта значна лягчэй кінуць да вэб-старонкі, чым публікаваць артыкул у часопіс або часопіс, і таму, што пошукавыя сістэмы могуць выцягнуць старонку на аснове ключавых слоў, ёсць значна больш верагодна сустрэць непажаданай ведаў па Web. Я бачу моцную патрэбнасць у будучыні мець сертыфікаваных сайтаў якім-небудзь чынам, каб забяспечыць якасную інфармацыю і мець пошукавыя сістэмы адчувальныя да гэтай сертыфікацыі.
- Інфармацыя шчыльнасць: нізкае дазвол экрана і нізкая хуткасць загрузкі вялікіх файлаў прад'яўляюць высокія шчыльнасці інфармацыі менш пажаданым ў Інтэрнэце. Розныя метады могуць быць выкарыстаны, каб кампенсаваць гэта, напрыклад, дакументацыя памеру файла і час загрузкі, выбар розных графічных дазвол, калекцыі эскізаў і / або абрэзаць малюнак, пры націску на дысплей высокім дазволам з мініяцюр, і г.д.
- Тэкст у параўнанні з графікай: час загрузкі, розныя магчымасці браўзэра, і дазвол пытанняў, схіліць чару ваг тэксту ў параўнанні з графікай больш да тэксту.
- Паслядоўная супраць гештальт разумення: Тафта адзначае, што высокая шчыльнасць графіка на паперы, дазваляюць убачыць складаныя структуры як адзінага гештальт. Тым не менш, інтэрактыўныя дысплеі вэб можа прывесці вас паслядоўна, хоць крокі, якія прадастаўляюць вам толькі ў кантэксце, што вам трэба ведаць, на аснове вашых папярэдніх выбараў, хутчэй як візуальнае дрэва тэлефона. У некаторых выпадках гэта больш эфектыўна, чым Дысплэй з высокай шчыльнасцю, у іншых выпадках гэта не вельмі.
- Захаванне кантэксту: гэта нашмат лягчэй згубіцца ў вэб-сайт, чым кнігі, паколькі Ёсць так шмат шляхоў, каб пераследваць. Такім чынам, эфектыўныя інструменты навігацыі маюць значна большае значэнне ў Інтэрнэце, чым для друкаванай.
(Q) Якія ў вас рэкамендавалі вэб-сайты з пункту гледжання зместу, графічных актуальнасці, эстэтыкі і эфектыўнасці, і чаму?
Сярод сайтаў, якія я люблю лепш за ўсё з'яўляюцца:- Сайт NASA SKYWATCH па адрасе: http://spaceflight.nasa.gov/realdata/sightings/index.html.
У ім змяшчаецца інфармацыя аб шматлікіх буйных спадарожнікаў на арбіце. Пачатковая старонка тлумачыць мэта як тэкст, так і струменевае медыя фармату, абмяркоўвае рэсурсаў, неабходных з пункту гледжання часу загрузкі і памеру файла, і ўтрымоўвае добры двухузроўневай кіравання навігацыяй, якая накіроўвае вас у любую частка сайта NASA.
Java-аплет прадастаўляе інфармацыю аб спадарожніках і арбітальных пазіцый, якія служаць як інжынер-тэхнік і грамадскасці праз табліцы і карты кветак анатаваны арбітальнай трэкаў супраць вызначаны і выкладзены сузор'яў на дадзеным месцы. Яна простая ў выкарыстанні, прывабны, і вельмі інфарматыўным.
- Яшчэ адзін добры сайт: http://www.nsf.gov Яго пачатковая старонка прывабным, кампактны, выкарыстоўвае мала графікі, і загружае хутчэй. Ён таксама змяшчае добры двухузроўневай навігацыі кантроль, кантакт, недатыкальнасць прыватнага жыцця, дапамога, інфармацыя і налады, інструментам пошуку, выбару для катэгорыі гледача (студэнтаў, выкладчыкаў, даследнікаў Прынцып), і многія з наступных старонак прапануем некалькі варыянтаў прагляд дадзеных, такіх як HTML, звычайны тэкст, і PDF фармаце. Шматлікія, але не ўсе старонкі захоўваюць той жа выгляд і элементы навігацыі на галоўнай старонцы.
- Некаторыя выключна інфарматыўныя графікі можна знайсці, націснуўшы на "Карта Рынка" па адрасе: http://www.smartmoney.com/maps/
У той час як першапачаткова адкрываецца зусім бескарысныя і раздражняе рэклама, якая застаецца на экране на працягу доўгага часу і не дае вам ключ да разумення таго, што варта, у выніку дысплей варта. Ён змяшчае прадстаўлення многія акцыі, згрупаваных па галінах, і закадаваныя з дапамогай каляровых раёнах, памеры якіх адлюстроўвае іх долю рынку, і чый адценне і інтэнсіўнасць паказаць іх запас прадукцыйнасці: ярка-чырвоны сэнс рэзкае зніжэнне, чорны сэнсу без зменаў, а ярка-зялёны паказвае моцны рост, з прамежкавымі адценнямі паміж імі. Зірнуўшы на экран Сёння, я бачу, што тэхналогія акцыі ўніз, запасы энергіі растуць, як і спажывецкія клямараў. Я магу праглядзець сектара больш падрабязна, можна навесці курсор на плошчу, каб вызначыць канкрэтныя акцыі і атрымаць некаторыя звесткі аб прадукцыйнасці, а таксама можаце націснуць на складзе, каб атрымаць падрабязную інфармацыю. Ён таксама змяшчае панэль, якая дазваляе наладзіць карту. Гэта выдатны прыклад некалькіх функцыянаванне графікі, якія дазваляюць праглядаць інфармацыю па-рознаму.
(Q) Як можа сайт быў эфектыўным, цікавым і прывабным для Чыстая серфер, а таксама для паглыбленага карыстальнік?
Добры вэб-сайт ўключае ў сябе наступнае:- Ён заснаваны на карыстачоў па цэнтру (у адрозненне ад карпаратыўных, структурныя, або любой іншай пункту гледжання), прыстасаваныя выпрабаванні дызайн
- Яго пачатковая старонка ўтрымлівае простыя низкотехнологичных HTML, які хутка загружаецца, не патрабуе убудоў, працуе амаль на ўсіх браўзэрах, месцы найбольш важную інфармацыю ў верхняй частцы, і кажа людзям адразу:
- якія прадметы ён ахоплівае і якія пытанні ў ім разглядаюцца
- калі ён мае інфармацыю, якую яны імкнуцца
- калі інфармацыя току (напрыклад, даты апошняга змены)
- тое, што доказаў таго, што інфармацыя з'яўляецца дакладнай
- Пачатковая старонка выяўленне лагатып і ўтрымоўвае ці ўтрымоўвае спасылкі на:
- карта
- Кантактная інфармацыя
- інфармацыю аб арганізацыі, адказнай
- форму на сайце зваротнай сувязі або паказальнікі на дыскусійную групу
- гарантыі ў адносінах да бяспекі і прыватнасці
- сайты
- Інфармацыя аб тэхналогіі, неабходныя для прагляду наступных старонак сайта (напрыклад, версіі браўзэра, неабходны для загрузкі, памеры файлаў ці ownload разоў)
- Наступныя старонкі сайта валодаюць многімі якасцямі пачатковай старонцы, але і:
- выкарыстоўваць той жа выгляд і ў якасці хатняй старонкі з пункту гледжання вонкавага выгляду і размяшчэння лагатыпа і іншай інфармацыі, якая адназначна ідэнтыфікаваць сайт (знешнія табліцы стыляў з'яўляюцца карыснымі для гэтага)
- забяспечыць паслядоўную элементаў навігацыі, якія выглядаюць аднолькава і ў тым жа месцы, напрыклад, "Next", "Назад" і "Home" кнопкі (асабліва пазбягаць старонкі, дзе кнопку "Назад" не працуе)
- дысплей кантэкст і месцазнаходжанне: У складаных сайтаў вельмі важна ведаць, дзе вы знаходзіцеся і дзе вы былі. Хоць кадры ствараюць сур'ёзныя праблемы юзабіліці яны часам выкарыстоўваюцца для забеспячэння змест, якое застаецца пастаянным па ўсім сайце. URL-адрасы, якія змяшчаюць толькі простыя словы і сімвалы, не можа дапамагчы вызначыць месцазнаходжанне на вузле, а таксама дрэва дыяграмы, вылучыце бягучае месцазнаходжанне карыстальніка
- кіравання вокнамі правільна: распаўсюджванне вокнаў, якія застаюцца каля прычыны бязладзіцы і блытаніны (а таксама пагрозы бяспекі, калі карыстальнік робіць больш, чым сёрфінг), але вокны аўтаматычна зачыняюцца самі па сабе могуць напалохаць і заблытаць карыстальніка: вэб-дызайнер павінен важыць гэтыя пытанні, зыходзячы з абставінаў, якія прымяняюцца
- выкарыстоўваць той жа выгляд і ў якасці хатняй старонкі з пункту гледжання вонкавага выгляду і размяшчэння лагатыпа і іншай інфармацыі, якая адназначна ідэнтыфікаваць сайт (знешнія табліцы стыляў з'яўляюцца карыснымі для гэтага)
- Усе старонкі сайта:
- прыглушаны фон, які не перашкаджае з накладаннем інфармацыі
- добры кантраст паміж фонам і тэксту або элементаў кіравання
- яркія колеру эканомна, каб вылучыць важныя змесціва
- аднаго колеру для ўсіх элементаў, якія належаць да той жа катэгорыі
- Тэкст, калі графікі падаюць рэальныя перавагі
- бачных канструктыўных інфармацыі, такія як загалоўкі, тытры, і куля спісы замест доўгіх абзацаў
- прабелы ў якасці асноўнага падзельніка
- істотна скараціць тэкст па параўнанні з друкаванай
- праверка арфаграфіі, каб пераканацца, што рух і праца функцыі пошуку
(Q) Калі сайт быць прыгожай, каб быць эфектыўным?
У некаторай ступені прыгажосць у вачах таго, хто глядзіць у тым, што карыстач навучаны інтэрпрэтаваць некаторыя мадэлі могуць бачыць прыгажосць у сайт, які мае сэнс для іх, але, здаецца выродлівым і дэзарганізаваная, каб хто-то без іх фоне (часта мы бачым, што мы чакаем даволі чым тое, што там, хутчэй, як жаба, якая шмат у чым сляпыя да ўсяго, што не мала, цёмна, і рух рыўкамі - лётаць).Тым не менш, для сайтаў, якія не патрабуюць адмысловых ведаў, я лічу, эстэтыка можа быць дасягнута за кошт выразнага дызайну, які падкрэслівае зручнасць выкарыстання, асабліва калі эстэтычныя дапаўненні дадаюцца толькі калі яны свядома апраўдана з пункту гледжання іх карыснасці
Што ўплывае зрабіць памер экрана і дазвол мець на графікі на вэб-і як вы распрацаваць эфектыўныя графікі пад гэтыя абмежаванні?
Гэта вялікая і важная тэма, і, магчыма, з'яўляецца прычынай істотных адрозненняў паміж дызайнам ў параўнанні з вэб паперы:- Адрозненні ў памерах: калі мы абмяжуем нашу дыскусію "традыцыйных" кампутараў і манітораў, то адрозненні ў памер экрана (у адрозненне ад рэзалюцыі) не моцна ўплываюць на разуменне графіка, паколькі вялікія 19-цалевыя экраны толькі ў 2,5 разы сферы малога 12 цалевымі экранамі. Тым не менш, мы бачым усё большая колькасць прылад, такіх як кішэнныя кампутары, сотавыя тэлефоны, і нават наручных гадзін, што праглядаць вэб-старонкі і чые экраны ў 100 разоў менш. Тыповыя вэб-старонак проста не змяшчаецца на такія прылады, а таксама дызайн старонак павінны быць спецыяльна прызначаныя для іх, хоць XML / XSL часта можа быць выкарыстана для паўторнага прызначэння вялікіх дакументаў, каб адпавядаць.
У параўнанні з вялікай раскладны карты ці старонкі, якія дазваляюць вачэй лёгка стрэлападобнасцю на вялікіх плошчах, вэб-прагляду належыць на спасылкі на некалькі старонак, якія ўтрымліваюць часткі гледжання, і таму агульны кантэкст губляецца - любы чалавек, які выкарыстоўвае карту кнізе тыпу ведае, як цяжка прытрымлівацца маршруце, які перасякае розныя старонкі, аналагічна параўнання ў буйны навуковы графіку вельмі цяжка зрабіць, калі глядач не можа ўбачыць усё гэта адразу.
Акрамя таго, бягучы ВК-экранаў прапануюць абмежаваныя куты агляду экрана, так што нават калі б яны былі вялікімі або высокага дазволу, яны зрабілі б разумення на вялікіх плошчах цяжка.
- Адрозненні ў рэзалюцыі: гэта нават важней, чым памер. Тэарэтычна нават старонка прызначана для 20-цалевы дысплей будзе змяшчацца на наручныя гадзіны адлюстроўвацца, калі дазвол было тое ж самае, але нізкім дазволам экрана не толькі сіла карыстальніка ў гарызантальнай прагорткі, але можа не аказваць асноўныя часткі яго.
У параўнанні з паперай, адлюстроўвае ў агульным карыстанні сёння маюць ад пяці да 10 разоў менш дазвол. У выніку дэталь грубы, дробны тэкст з'яўляецца слабым і невыразным, а прагляд стомным, асабліва калі мігаценне экрана прысутнічае. Акрамя таго, агульны кантэкст згублены, прымушаючы карыстальніка запомніць і звязваць дадзеныя з папярэдніх экранаў, тое, за што чалавечы розум дрэнна падыходзіць.
З іншага боку, вэб дае сродкі, якія часткова кампенсаваць гэта:
- нягледзячы на пэўныя недахопы, выгода выкарыстання, асабліва ў дачыненні да навігацыі можна выкарыстоўваць фрэймы для паказу агульны выгляд сцэны ў адным кадры ў выглядзе інтэрактыўных малюнка карты: калі карыстач націскае на вобласць, у агляднай карце, з высокім дазволам З прычыны частка малюнка з'яўляецца ў 2-й кадр. Гэта асабліва эфектыўна, калі малюнак у першы кадр вылучае вобласць, якая была абраная на, адлюстроўвае бягучае становішча мышы па адносінах да карце, і калі малюнак карты ўключае ў сябе вялікая колькасць перакрыцці, а таксама рознай ступенню маштабавання, паляпшэнне магчымасць адлюстравання ўсіх кантэкст, які хацелася б.
- Часам анімацыя можа быць эфектыўна выкарыстаны замест "малых кратныя": гладкая і хутка якія змяняюцца малюнка, асабліва калі яна знаходзіцца пад поўным кантролем карыстальніка, часта перадаюць інфармацыю лепш, чым статычнае высокае дазвол старонку
- нягледзячы на пэўныя недахопы, выгода выкарыстання, асабліва ў дачыненні да навігацыі можна выкарыстоўваць фрэймы для паказу агульны выгляд сцэны ў адным кадры ў выглядзе інтэрактыўных малюнка карты: калі карыстач націскае на вобласць, у агляднай карце, з высокім дазволам З прычыны частка малюнка з'яўляецца ў 2-й кадр. Гэта асабліва эфектыўна, калі малюнак у першы кадр вылучае вобласць, якая была абраная на, адлюстроўвае бягучае становішча мышы па адносінах да карце, і калі малюнак карты ўключае ў сябе вялікая колькасць перакрыцці, а таксама рознай ступенню маштабавання, паляпшэнне магчымасць адлюстравання ўсіх кантэкст, які хацелася б.
- Аднак улічыце, што памер і дазвол перавагі паперу адлюстроўвае знікне праз 5-10 гадоў: ужо два-мегапіксэльнай ВК-экранаў на партатыўныя кампутары знаходзяцца на рынку, IBM нядаўна прадставіла 22-цалевы ВК-дысплей з дзіўнай 9 мегапікселяў, што старанна супернікаў друкаванай старонкі (у цяперашні час гэта вельмі дорага, але, безумоўна, падаць у цане), і ClearType Miscosoft (TM) субпиксельной тэхналогія значна павышае эфектыўнае дазвол тэксту і чорна / белых малюнкаў, часам на 300%
Акрамя таго, новыя ВК-дысплеі маюць больш шырокае поле зроку, і яны не мігочуць. У бліжэйшай будучыні, планшэтных ПК з уводам стілус можна трымаць і маніпуляваць так жа, як часопіс, пераўзыходзяць за ўказанне, маляванне, і пісаць, чым мышы і клавіятуры, а таксама будзе ўзмоцнены з дапамогай голасу і аўдыё ўваход / выхад. Вельмі вялікія экранаў знаходзяцца на шляху, а таксама сятчаткі дысплеяў для носных кампутараў прадастаўлення сапраўдных высокім дазволам стэрэаскапічнага малюнкі, якія здаюцца ўладальніку быць 6 футаў у шырыню.
(Q) Якія новыя магчымасці прапануюцца дызайн вэб-тэхналогіі?
Інтэрнэт можа забяспечыць інфармацыйную сераду багацей, чым гэта магчыма пры статычных старонак на паперы, такія як:- Up-актуальная інфармацыя: Вэб-інфармацыя не можа быць больш току, чым друкаваныя, але можа быць імгненным, як у выпадку дарожна-транспартнага вэб-камеры, браняванне квіткоў, біржавыя справаздачы, GPS счытвання і г.д.
- Карыстальнік анімацыя, кантралюемая: невялікія кратныя звычайна выкарыстоўваюцца для імітацыі анімацыі на паперы, але сетка прапануе значна больш магчымасцяў, такіх як
- рэальнае рух часу
- Карыстальнік кантроль хуткасці і кірункі (наперад і назад)
- анімацыя выбраных карыстальнікам падмноства так, што асабліва пераходы можна назіраць на розных хуткасцях і кірунках
- замарозіць кадры, захапіць адзін або некалькі кадраў у анімацыі
- рэальнага часу водгуку для ўводу пастаўляюцца небудзь з карыстальнікаў або знешніх крыніц
- 3D-графіка: часта бывае цяжка знайсці правільную пункт гледжання на складаныя 3D сцэны на паперы, як які-небудзь адной пункту гледжання, ці нават набор паданняў, могуць хаваць або скажаць важную інфармацыю. Але 3D візуалізацыі дадзеных у Інтэрнэце, як гэта прадугледжана VRML ці іншыя праграмы, дазваляюць карыстачу праглядаць дадзеныя пад любым кутом. Шмат гадоў назад я ўбачыў праніклівы дэманстрацыя JW Тьюки, якія даследавалі шматмерных (10-12 памер) набораў дадзеных у інтэрактыўным рэжыме. Першапачаткова ўсё, што з'явілася былі наборамі выпадковых бессэнсоўнай кропкі, але, як ён паваліўся дадзеных па вызначаным памерах і прыкладных павароты, моцныя і простыя крывыя высветлілася, што ілюструе важныя адносіны.
Хоць гэта праўда, што кантроль над 3D-аб'екты даволі цяжка сёння, як мы звычайна робім гэта з дапамогай мышы на 2D паверхні, будзе лягчэй у найбліжэйшай будучыні з дапамогай прывабных і лёгкая гарнітура, якія прапануюць праўдзіва стэрэаскапічнага гледжання ў спалучэнні з стэрэа-камеры, якія адсочваюць становішча рук у 3D, што дазваляе нам "схапіць" і маніпуляваць 3D выявы гэтак жа лёгка, як мы гэта робім аб'ектаў рэальнага свету.
- Высокая шчыльнасць графіка: хоць друкаваны забяспечвае больш высокі дазвол, чым цяперашнія дысплеі, некаторыя вэб-тэхналогій дазваляе павялічыць для прагляду дадзеных мностваў ў значна больш падрабязна, чым гэта магчыма на паперы.
- Разведачных аналіз дадзеных: вэб дазваляе не толькі праглядаць, але маніпуляваць і прымяніць пераўтварэння да дадзеных для таго, каб раскрыць адносіны, якія ніколі не маглі назірацца на паперы
- Універсальныя прылады інфармацыя: Вэб, асабліва з дапамогай бесправаднога доступу, можа звязаць разам усе формы інфармацыі, якія сёння падаюць мноства розных прыладаў: гадзіннік, будзільнік, радыё, тэлебачанне, газеты, часопісы, кнігі, кампакт-дыскі, кампутары, відэагульні, прававыя, фінансавыя і медыцынскія дакументы, ліцэнзіі, дазволы, класы, тэатры і г.д.
(Q) Якія найбольш распаўсюджаныя памылкі, знойдзеныя ў вэб-дызайне?
Сярод найбольш раздражняльных дэфектаў дызайн я часта бачу, з'яўляюцца:- Адсутнасць даты / часу: большая частка інфармацыі лятучых да некаторай ступені. "Даты апошняй змены" мае важнае значэнне для большасці сайтаў, і ў любы час-залежных дадзеных на старонцы трэба час, дакументацыя
- Збівае з толку навігацыі, вокны, адключыць навігацыю, або занадта шмат ўсплывальных вокнаў
- Першапачатковыя старонкі, якія загружаюцца занадта павольна або патрабуе убудоў або выключных рэсурсаў, ці сцэнары, якія адключаюць браўзэраў
- Адсутнасць інфармацыі на сайце, напрыклад, карта сайта і кантактную інфармацыю
- Беспарадак ва ўмовах заблытанай макет, доўгія параграфы, адцягваючы графіка, яркія фоны, непаслядоўна выкарыстанне колеру (розныя колеры ў межах адной тэмы ці ж колер па розных тэмах), муар
- Неадчувальнасць да тэхнічных або карыстальнікам межы: вэб-старонкі павінны прадастаўляць альтэрнатыўны прагляд рэсурсаў для асоб з абмежаванымі браўзэраў, кампутары, або фізічных абмежаванняў.