Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 160
такое надо распечатать как шпаргалку:)
He-man! Воспоминания детства…
А я как-то находил вот такую шпаргалку ;-)
www.williamspublishing.com/PDF/978-5-8459-1222-0/part.pdf
www.williamspublishing.com/PDF/978-5-8459-1222-0/part.pdf
Пункт 10 в широких колонках можно немного нивелировать расстановкой мягких переносов (­), хотя неразрывные пробелы, например, всё равно имеют фиксированную ширину и при изменении межсловных пробелов в тексте браузеры обходят их стороной. Так что, ИМХО, в отдельных случаях рискнуть всё же можно.
Пункт 10, на мой взгляд, весьма спорен. Мне, например, гораздо комфортнее читать текст, выровненный по ширине, а скачущая правая граница текста раздражает. К тому же в газетах и журналах текст выровнен по ширине и для тех, кто читает не только интернет такое выравнивание естественно и привычно.
Я вообще не понимаю прелестей выравнивания по левому краю. Разве что скорость обработки текста тут может иметь роль. Однако, компьютер железный, пускай трудится (да и с производительностью сейчас все нормально). А человек об эту лестницу глаза ломать не должен.
P.S. Все вышесказанное — личное мнение.
Я вообще не понимаю прелестей выравнивания по левому краю. Разве что скорость обработки текста тут может иметь роль. Однако, компьютер железный, пускай трудится (да и с производительностью сейчас все нормально). А человек об эту лестницу глаза ломать не должен.
P.S. Все вышесказанное — личное мнение.
Имеется в виду *автоматическое* выравнивание по ширине. Без вылизывания. Для резиновых сайтов, например. На фиксаже (как и в журналах) можно добиться хорошей читаемости при таком выравнивании, а когда это применяется где попало, и тексты предварительно не подготавливаются — это плохо)
В большинстве случаев (когда колонка текста шириной не менее трети ширины современного монитора и размер шрифта не гигантский), текст, выровненный по ширине смотрится хорошо.
В отдельных случаях, соглашусь, нужно использовать другой тип выравнивания. Но такие случаи вовсе не массовы и я вовсе не сторонник все равнять по ширине. Наоборот. Не нужно крайностей. Но выравнивание по ширине все же более привычно, т.к. с детства человек читает в основном печатную продукцию. Хотя, может я идеалист и книг уже никто не читает
В целом совет 10 можно читать так: «Т.к. вам все равно лень поработать с текстом или версткой (ограничив, где надо, ее резиновость), то используйте выравнивание по левому краю везде»
Да, про мобильные платформы знаю. Но под них, на мой взгляд, нужно отдельный дизайн делать, т.к. не будет сайт одинаково хорошо смотреться на эране смартфона и на экране 24" монитора.
Опять же, все имхо
В отдельных случаях, соглашусь, нужно использовать другой тип выравнивания. Но такие случаи вовсе не массовы и я вовсе не сторонник все равнять по ширине. Наоборот. Не нужно крайностей. Но выравнивание по ширине все же более привычно, т.к. с детства человек читает в основном печатную продукцию. Хотя, может я идеалист и книг уже никто не читает
В целом совет 10 можно читать так: «Т.к. вам все равно лень поработать с текстом или версткой (ограничив, где надо, ее резиновость), то используйте выравнивание по левому краю везде»
Да, про мобильные платформы знаю. Но под них, на мой взгляд, нужно отдельный дизайн делать, т.к. не будет сайт одинаково хорошо смотреться на эране смартфона и на экране 24" монитора.
Опять же, все имхо
я просто оставлю эту картинку здесь.
Поставил бы вам плюс, да карма не позволяет. В данном случае, я согласен с вами полностью, выравнивание по ширине неуместно.
Но ведь я об этом выше писал. Нельзя пользоваться инструментом бездумно, любую идею можно довести до абсурда.
А вот, например, статьи на хабре весьма неплохо бы смотрелись выыровненные по ширине, ибо шинина колонки позволяет
Но ведь я об этом выше писал. Нельзя пользоваться инструментом бездумно, любую идею можно довести до абсурда.
А вот, например, статьи на хабре весьма неплохо бы смотрелись выыровненные по ширине, ибо шинина колонки позволяет
В особенности неплохо смотрелись бы выровненные по ширине исходники.
Ну давайте еще подсветку синтаксиса в художественном тексте сделаем. Если пользоваться инструментом бездумно, то много чего до абсурда довести можно.
Смысл моих постов в том, что утверждение: «использовать выравнивание по ширине — преступление», на мой взгляд, неверно. Также как неверно утверждение: «везде нужно использовать выравнивание по ширине».
Головой думать прежде всего нужно.
Смысл моих постов в том, что утверждение: «использовать выравнивание по ширине — преступление», на мой взгляд, неверно. Также как неверно утверждение: «везде нужно использовать выравнивание по ширине».
Головой думать прежде всего нужно.
Кстати, это скриншот известного сайта. Довольно давно я писал им в редакцию просьбу исправить, однако же, как видно, ничего не изменилось.
Всегда выравниваю текст по ширине везде, где это возможно — таким образом информация подается в привычном для человека виде. И очень не люблю, когда сайты с отличным дизайном и контентом этого не делают. Опять таки ИМХО.
В газетах (и в ворде) для выравнивания по ширине используется изменение расстояний между буквами, поэтому выглядит такое выравнивание нормально. А в браузерах — только между словами.
Кажется так, может кто поправит.
Кажется так, может кто поправит.
Кстати, есть плагины, которые могут переносы расставлять. Вроде на JS, хотя могу ошибаться…
Решил по быстрому погуглить, нашел статью хабра habrahabr.ru/blogs/typography/49068/, но это не автоматическое, а надо тексты туда-сюда копировать.
Решил по быстрому погуглить, нашел статью хабра habrahabr.ru/blogs/typography/49068/, но это не автоматическое, а надо тексты туда-сюда копировать.
В газетах и журналах пользуются переносами, в онлайновых изданиях — в основном нет, потому текст в строке расползается в ширину, в каждой строке расстояние между словами выходит разное, что выглядит некрасиво. ИМХО, если и использовать выравнивание по ширине, то только в сочетании с мягкими переносами (). Именно так я делаю в статьях на своем сайте, для удобства вставки переносов есть удобный инструмент — OnLine Hyphenation
покуда браузеры не научились нормально переносить слова (а пока даже подвижек в этом направлении не наблюдается) к совету стоит прислушаться, _особенно_ для узких колонок.
Без переносов ни в коем случае не естественно и не привычно. Недопустимо широкие пробелы уродуют верстку и мешают чтению.
Вот тут пример текста, выровненного по ширине:
eaglenest.ru/article/Justify%20and%20Hyphenation
По-моему очень пристойно выглядит. И, конечно же, использование переносов только улучшит ситуацию.
Еще раз повторюсь, я не сторонник использовать выравнивание по ширине где только можно. Но и не согласен с мнением, что такое выравнивание вообще нельзя нигде использовать.
eaglenest.ru/article/Justify%20and%20Hyphenation
По-моему очень пристойно выглядит. И, конечно же, использование переносов только улучшит ситуацию.
Еще раз повторюсь, я не сторонник использовать выравнивание по ширине где только можно. Но и не согласен с мнением, что такое выравнивание вообще нельзя нигде использовать.
Великолепный пример!
Все еще выравниваете по ширине? Мы идем к вам!
Все еще выравниваете по ширине? Мы идем к вам!
Ну да, форматирование основного текста статьи вы не заметили. Найти косяк и заклеймить позором выравнивание по ширине во всех ситуациях, конечно, же стоило.
Только вот я не призывал его использовать везде и всегда
Только вот я не призывал его использовать везде и всегда
Основной текст? Присмотрюсь и к основному тексту:
Ну просто отличный основной текст!
Получается, сапожник без сапог?
Ну просто отличный основной текст!
Получается, сапожник без сапог?
Дайте мне ссылку на любой ресурс, и я поигравшись размером окна и размером шрифта покажу вам косяки верстки.
Давайте PDF будем отображать.
Про сапожника не понял. Ресурс не мой, первое что попалось в гугле.
Давайте PDF будем отображать.
Про сапожника не понял. Ресурс не мой, первое что попалось в гугле.
Я хотел показать не косяк верстки, а простую вещь: на широкой колонке выравнивание по ширине смотрится нормально, а на узкой колонке — плохо. Чем уже колонка, тем хуже, но при этом узкую колонку читать удобнее чем 80%-100% экрана (особенно на широкоформатных мониторах). И пока все варианты переносов — это костыли, разной степени кривости.
Так что пока гораздо лучше text-align:left чем криво мостить переносы.
Про сапожника — это то, что человек, который учит нас выравнивать по ширине, на своем сайте по ширине выравнивает предельно криво. Вы тут не при чем. Правда пример вы выбрали неудачный.
Так что пока гораздо лучше text-align:left чем криво мостить переносы.
Про сапожника — это то, что человек, который учит нас выравнивать по ширине, на своем сайте по ширине выравнивает предельно криво. Вы тут не при чем. Правда пример вы выбрали неудачный.
Что касается колонок, я с вами полностью согласен. Для узких колонок выравнивание по ширине вредно.
В целом убедили, text-align:left в большинстве случаев действительно более приемлемый вариант. Соглашусь с вами.
Но все же, говорить, что выравнивать по ширине категорически нельзя никогда я бы не стал.
В целом убедили, text-align:left в большинстве случаев действительно более приемлемый вариант. Соглашусь с вами.
Но все же, говорить, что выравнивать по ширине категорически нельзя никогда я бы не стал.
Ну, у автора статьи написано «Старайтесь не использовать», т.е. без особой категоричности. Так что это если и юзабилити-преступление, то мелкое.
Сам я стараюсь не использовать justify даже в широком основном тексте — если нужно будет вставить картинку с обтеканием, даже в широком красивом тексте внезапно появляется уродливая узкая колонка со всеми прелестями километровых пробелов.
Сам я стараюсь не использовать justify даже в широком основном тексте — если нужно будет вставить картинку с обтеканием, даже в широком красивом тексте внезапно появляется уродливая узкая колонка со всеми прелестями километровых пробелов.
Я думаю этому тексту в такой форме никакое выравнивание не поможет ^_^
про русский дух понравилось
Газеты и книги верстаются не браузерами. В худшем случае вёрстку и расстановку пробелов делает умная программа, в лучшем — человек. Далеко не во всех книгах используется выравнивание по ширине, а к флагу глаз привыкает достаточно быстро, и если текст набран без ляпов, уже после нескольких абзацев читатель на него не будет обращать никакого внимания.
Выравнивание по левому краю позволяет не раскорячивать и не вносить правки в текст тогда, когда он ну никак не переносится нормально. А при том, что текст с переносами в вебе вообще приходится делать, только расставляя мягкие переносы ручками или скриптом ещё на этапе его подготовки, то это существенно затягивает вёрстку страницы.
В узких колонках или без переносов выключка по формату вообще недопустима, ибо тихий ужас )
Выравнивание по левому краю позволяет не раскорячивать и не вносить правки в текст тогда, когда он ну никак не переносится нормально. А при том, что текст с переносами в вебе вообще приходится делать, только расставляя мягкие переносы ручками или скриптом ещё на этапе его подготовки, то это существенно затягивает вёрстку страницы.
В узких колонках или без переносов выключка по формату вообще недопустима, ибо тихий ужас )
В газетах и журналах при выравнивании по ширине используются переносы частей слов на другую строку, поэтому там все нормально
Пункт 10 — дань тамошней типографской традиции + длительное игнорирование Мозиллой символа неразрывного пробела + сниженные станарты оформления текста в WWW
Хорошая подборка. Почти всё знал, но нелишним было вспомнить.
P.S. Последний пункт — это всё-таки не по центру, а по ширине.
{text-align: justify;}
P.S. Последний пункт — это всё-таки не по центру, а по ширине.
{text-align: justify;}
Да, но некоторым это не позволяет религия либо сложная структура формы. И я их поддериваю.
Это плохо. когда label отдельно, его например можно вынести влево float'ом, да и что-то выглядит ка-то топорно, лучше for использовать.
>Очень спорно, и к тому же красиво не реализуемое.
если картинка без прозрачностей, то очень всё хорошо реализуемо.
особенно если это image-raplacement — тогда при отключении картинок сохраняется цветовая стилистика сайта.
если картинка без прозрачностей, то очень всё хорошо реализуемо.
особенно если это image-raplacement — тогда при отключении картинок сохраняется цветовая стилистика сайта.
естественно ничего, потому как автор имел в виду именно фоновые картинки, а не картинки.
<div class="welcome"></div>
естественно ничего, потому как автор имел в виду именно фоновые картинки, а не картинки.
указал картинку — укажи и цвет!
<div class="welcome">Hello, habrauser!</div>
.welcome {background: #333 url('../img/welcome.png')}
указал картинку — укажи и цвет!
Преступление #11: Не прописывать цвет body
Даже если body — белый, это надо явно указывать, т.к. есть люди, у которых фоновый цвет в браузере не белый, это приводит к тому, что у них ваш body отображается фоновым цветом браузера.
Даже если body — белый, это надо явно указывать, т.к. есть люди, у которых фоновый цвет в браузере не белый, это приводит к тому, что у них ваш body отображается фоновым цветом браузера.
Дык всё это давно «покладено» в reset.css ))))
А список можно пополнять бесконечно…
А список можно пополнять бесконечно…
В свое время этим грешил даже сайт apple.
p.s. Я бы этому преступлению дал #1, так как видно его сразу.
p.s. Я бы этому преступлению дал #1, так как видно его сразу.
пожалуйста, не надо прописывать белый цвет body, потому что у некоторых людей цвет фона в браузере не белый специально
лучше делать нормальную прозрачность в картинках, чтобы они на любом фоне смотрелись хорошо
лучше делать нормальную прозрачность в картинках, чтобы они на любом фоне смотрелись хорошо
Всегда было интересно: а есть какая-то статистика по этому делу. Все говорят, что надо помнить про людей с отключенным яваскриптом и небелым дефолтовым цветом страницы в браузере, но вот лично я за свою жизнь таких людей не видел. Делаю, чтобы работало и без яваскрипта хоть как-то, и бэкграунд задаю, но сугубо основываясь на этой вот слепой вере.
Статистику дайте, статистику! ))
Статистику дайте, статистику! ))
Не нужно этого делать. Если пользователь изменил у себя цвет, то только ему за это отвечать, зачем ему что-то навязывать? Хочет читать чёрным по чёрному — его дело )
это не преступление, это фича )
По justify очень спорно :) Вся печатная в ч.т. и в электронном виде продукция как раз выравнена по ширине. Так что от контекста зависит.
Другое дело, что переносить по слогам (XXI век, чёрт побери!!!) браузеры ещё не научились, поэтому в узкой колонке могут возникнуть огромные пробелы, что не очень красиво.
Другое дело, что переносить по слогам (XXI век, чёрт побери!!!) браузеры ещё не научились, поэтому в узкой колонке могут возникнуть огромные пробелы, что не очень красиво.
Страшно поверить, что кто0то может делать иначе.
Про пункт 9 и P.S. у статьи автор конечно отжег! Я прошелся по всем его подчеркнутым словам, в надежде перейти на оригинал =))
Соскучился по таким постам.
Пункт 10 весьма спорен, меня, например, сильно раздражает рваная правая кнопка при text-align: left
граница текста конечно же, а не кнопка
не проснулся ещё :-)
не проснулся ещё :-)
Полуторасантиметровые пробелы гораздо омерзительней.
На узкой колонке выравнивание по ширине невозможно, если у вас не расставлены мягкие переносы очень и очень тщательно, часто даже вручную. Для веба это делать сложнее, т.к. конечный результат может быть разный у разных пользователей.
На узкой колонке выравнивание по ширине невозможно, если у вас не расставлены мягкие переносы очень и очень тщательно, часто даже вручную. Для веба это делать сложнее, т.к. конечный результат может быть разный у разных пользователей.
Дык никто и не призывает юзать джастифай в узких кололнках, там это реально коллапс, а вот в центровых контентных это часто можно себе позволить, там не будет диких интервалов между словами.
Для веба это в принципе невозможно, так как сталкивался неоднократно, что один и тот же текст с одними и теми же стилями разные браузеры рендерят по-разному. Например, в Опере 9.2х строка была на несколько пикселей длиннее, чем в IE7. Соответственно, кернинг идёт лесом (
Почему ж так все не любят выровненный по ширине текст, такое ощущение что я единственный у кого с этим проблем не возникает. Конечно 3 строчки не надо равнять, но абзац-то можно.
10 преступлений, 100 способов закругления, 25 способов привлечения, 26.5 способа создания… пф… надоело
> Преступление #3: Не помечены посещённые ссылки
Мне кажется что это не совсем преступление, а зависит от дизайна и цветовой гаммы. Вот например на хабре нет выделения посещенных ссылок, однако никто не кричит — преступление.
Поэтому, если цветовая гамма сайта позволяет использовать visited, то сделать нужно, если сильно пестрит — то не стоит.
Мне кажется что это не совсем преступление, а зависит от дизайна и цветовой гаммы. Вот например на хабре нет выделения посещенных ссылок, однако никто не кричит — преступление.
Поэтому, если цветовая гамма сайта позволяет использовать visited, то сделать нужно, если сильно пестрит — то не стоит.
Тест прошел, 10 из 10, все знаю, все применяю.
Преступление #0: ставить label слева от рабиобаттона.
Мульт просто классика :). Я когда-то вставал в 6 утра, чтобы посмотреть его.
Преступление #11: Писать заголовки светло-серым цветом, чтобы я не мог их найти, быстро просматривая текст.
оффтопик: на картинках Хи-Мэн, обажал в детстве этот мультик
черт, хотел вспомнить всех персонажей с химена, помню скелетор и химен. ввел в гугле — химен. вот вторая ссылка на Уикипедию — bg.wikipedia.org/wiki/%D0%A5%D0%B8%D0%BC%D0%B5%D0%BD
Удивительный сборник того, с чем я не согласен, либо согласен только частично.
Огромное спасибо автору!
[irony_mode off]
Огромное спасибо автору!
[irony_mode off]
Относительно пункта #2: на мой взгляд, хорошей практикой является вставлять в href полную ссылку на главную страницу, а не просто "/".
Время от времени приходится сохранять страницу в файл и потом относительный href="/" не работает.
PS на хабре с лого полная ссылка :)
Время от времени приходится сохранять страницу в файл и потом относительный href="/" не работает.
PS на хабре с лого полная ссылка :)
thanks.
Хабраэффект в действии:
Cайт превышает предел нагрузки на процессор
приобретенного тарифного плана хостинга.
Попробуйте зайти позже.
Site exceeds CPU load allowed by purchased hosting plan.
Please try again later.
Cайт превышает предел нагрузки на процессор
приобретенного тарифного плана хостинга.
Попробуйте зайти позже.
Site exceeds CPU load allowed by purchased hosting plan.
Please try again later.
Всё правильно можно только добавлять. Также серьёзным преступлением я считаю не использовать ссылки на элементах, при нажатии на которые пользователь переходит на другую страницу.
Например, вот такойт код:
Link text
Лучше реализовать вот так:
Link text
Тогда если отключить css ссылка останется ссылкой, кроме того в статус баре пользователь будет видеть куда он перейдёт, что является хорошим тоном. Кроме того и поисковику такая ссылка будет более понятной.
Например, вот такойт код:
Link text
Лучше реализовать вот так:
Link text
Тогда если отключить css ссылка останется ссылкой, кроме того в статус баре пользователь будет видеть куда он перейдёт, что является хорошим тоном. Кроме того и поисковику такая ссылка будет более понятной.
>> В атрибуте «alt» укажите описание изображения. А если картинка носит оформительно-декоративный характер, то оставьте его пустым (но не удаляйте!)
а то что?
и вообще, если нужно описание, то лучше его писать в title, ибо описание из alt всплывает только в ie
а то что?
и вообще, если нужно описание, то лучше его писать в title, ибо описание из alt всплывает только в ie
Поле «alt» используют также и поисковики, так что от заполнения этого поля только профит. Поле «title» предназначено для ссылок, поэтому если картинка идет со ссылкой, то title лучше добавлять в тэг <a… >, если же картинка без ссылки, но очень хочется, чтобы при наведении на нее всплыл хинт, то можно и в <img… >
Прошу прощенья, придётся повторить, не знал что тут не эскейпиться html)))
Всё правильно можно только добавлять. Также серьёзным преступлением я считаю не использовать ссылки на элементах, при нажатии на которые пользователь переходит на другую страницу.
Например, вот такойт код:
Лучше реализовать вот так:
Тогда если отключить css ссылка останется ссылкой, кроме того в статус баре пользователь будет видеть куда он перейдёт, что является хорошим тоном. Кроме того и поисковику такая ссылка будет более понятной.
Всё правильно можно только добавлять. Также серьёзным преступлением я считаю не использовать ссылки на элементах, при нажатии на которые пользователь переходит на другую страницу.
Например, вот такойт код:
<div onclick="open_popup('http://habrahabr.ru/blogs/')">
<div class="icon"><div> Link text
</div>
Лучше реализовать вот так:
<a href="http://habrahabr.ru/blogs" onclick="return open_popup(this.href)" title="Go to blog"> <span class="icon"> <span>Link text </a>
Тогда если отключить css ссылка останется ссылкой, кроме того в статус баре пользователь будет видеть куда он перейдёт, что является хорошим тоном. Кроме того и поисковику такая ссылка будет более понятной.
«юзабилити преступлений» :) Я уже обрадовался, думал будут учить как удобно совершать преступления, ан нет, все-же тут про юзабилити сайтов :)
А если серьезно, то все и так достаточно очевидно, но удобно когда все в одном месте как чеклист.
А если серьезно, то все и так достаточно очевидно, но удобно когда все в одном месте как чеклист.
Согласен только с пунктом 4.
А первый, так вообще бред. Мне удобней тыкнуть по слову и отметить радио-баттон чем искать эту точку.
Может у кого разрешение экрана 1024х768 это и нормально, но при 1920х1080 мне не удобно.
А первый, так вообще бред. Мне удобней тыкнуть по слову и отметить радио-баттон чем искать эту точку.
Может у кого разрешение экрана 1024х768 это и нормально, но при 1920х1080 мне не удобно.
Уфф, мне делать нечего и я накатаю камент.
А вы организовывали такой опрос у пользователей или сами это придумали или списали у кого-то?
Потому что если б спросили, например у меня, то ответы были бы такие:
1) В формах метки не связаны с полями ввода
Да, без ссылок будет немного неудобно, но проблема небольшая. Уж никак не преступление. Если в системе нету мышки, а пользуются клавишей tab, то выбрать нужный вариант будет гораздо проще, не волоча фокус ввода по ссылкам (это о громких утверждениях, претендующих на полноту, но не охватывающих действительно всех аспектов).
2) Логотип не ведёт на главную страницу
Я лично никогда не кликаю по логотипу. Вместо этого я кликаю в строке браузера по домену. И об этом «преступлении» даже не догадываюсь.
3) Не помечены посещённые ссылки
Согласен, проблема есть. Только, опять же всё равно: посмотрите на свою личную историю посещений: у вас везде на каждом сайте стоит «1»?
4) Не подсвечено в форме активное поле
Я лично (тут я подчеркну, что буду говорить за себя) обычно не испытываю проблем с отслеживанием перемещений курсора. Одно «но»: по клавише tab курсор должен бегать предсказуемо: в том порядке, в котором читается текст. Вот когда он так не бегает — это позор разработчику.
Не подсвечено и не подсвечено. Если полей мало, они короткие и в них хорошо виден курсор — зачем держать пользователя за идиота и подсвечивать?
Гораздо лучше подсвечивать красным поля, в которые введено что-то неправильное (высший пилотаж — с комментарием что именно не нравится), и зелёным — если поле заполнено верно.
В общем, то, что в вашей статье не относится ко всем случаям жизни. Хотя подразумевается. Что, очевидно, неверно.
5) Изображения без описания
Да, не указывать alt — лоховство. Но реальная ли это проблема для пользователя, если он видит изображение и не наводит на него мышкой? Думаю, многие пользователи о таком даже не догадываются. Но как мерило профессионализма этот пункт использовать можно.
6) Фоновые изображения без фонового цвета
Хорошее замечание.
7) Использование длинных скучных абзацев текста
… или вообще подумайте — нужен ли этот скучный текст кому-нибудь. Может, вы занимаетесь ерундой, в то время, как галактико опасносте?
Я бы даже так сказал — ваш скучный текст не спасёт разбиение на абзацы и картинки. Могу привести в пример Гоголя Николая Васильевича. Уж до чего предложения наворачивал, а читают. И с удовольствием. Так что, может, дело не в длине текста и картинках? Тогда к чему данный пункт вообще?
8) Подчёркивание того, что не является ссылкой
Это хороший пункт, согласен. Но это частный случай общего: поведение должно быть понятно и предсказуемо. Чем меньше двусмысленностей — тем лучше.
Саму моду на подчеркивание ссылок не понимаю. Сейчас вообще редко встретишь подчеркнутые ссылки. Потому что CSS и можно переопределить. Вопросом «а смысл?» задаются немногие.
9) Призывать посетителей «кликнуть здесь»
Деревня, что с неё взять. С другой стороны — моим родителям понятнее, когда явно написано «click here». А css-нутую ссылку вообще можно не найти, если не искать специально (яркий пример — dirty.ru — поди пойми, где там ссылка и куда).
10) Выравнивать текст по ширине
А по-моему, отличный способ для чего-то типа газеты. Читать легко, Надо только учитывать область применения. И чтобы строка взглядом охватывалась. И рассчитывать при этом не на выпускников школы Олега Андреева, у которых поле зрения 360 градусов :-)
Просто по-вашему выходит «вообще использовать такое выравнивание — преступление». Бред ведь, согласитесь.
Ну и осмелюсь предложить навскидку пару гораздо больших преступлений, которые почему-то не вошли в список. Несмотря на.
1) Изменение привычного окружения пользователя.
Например, явное указание гарнитуры, а Какая пользователю разница, что вам нравится Georgia? Ну и пользуйтесь ей на здоровье, а у пользователя Verdana стоит. Не трогайте её.
Например, явное указание размера шрифта. Да, вы любите помельче. А пользователь, например — старый человек. Но почему-то хочет прочитать, что у вас на сайте написано. И что, получается, вы запрещаете ему это? У вас вёрстка поедет? Ха-ха, ну так сверстайте так, чтобы не поехала.
2) нет нормального поиска по сайту.
На сайте есть интересный контент, а найти нужное — проблема. Почему? Потому что обычно прикручивают поиск по любой подстроке — и на этом останавливаются.
Правильный поиск — простой и в то же время мощный. Это не отдельная страница, с кучей полей ввода, чекбоксов и прочих «интерфейсов», а одна небольшая строчка. Но при этом позволяющая искать, например, только темы в выбранных разделах, только по названию, по дате и т.д. В общем, поиск по сайту — это не только «сфинкса или гугла прикрутить».
В интернете и так уже полно всего. Надо закругляться с генерацией контента и переходить к улучшению качества его получения.
Т.к. я считаю себя пользователем, то данный пост вызван показать, как далеки «дизигнеры» от пользователей, для которых, по идее, должны стараться. Ничего не напоминает?
А вы организовывали такой опрос у пользователей или сами это придумали или списали у кого-то?
Потому что если б спросили, например у меня, то ответы были бы такие:
1) В формах метки не связаны с полями ввода
Да, без ссылок будет немного неудобно, но проблема небольшая. Уж никак не преступление. Если в системе нету мышки, а пользуются клавишей tab, то выбрать нужный вариант будет гораздо проще, не волоча фокус ввода по ссылкам (это о громких утверждениях, претендующих на полноту, но не охватывающих действительно всех аспектов).
2) Логотип не ведёт на главную страницу
Я лично никогда не кликаю по логотипу. Вместо этого я кликаю в строке браузера по домену. И об этом «преступлении» даже не догадываюсь.
3) Не помечены посещённые ссылки
Согласен, проблема есть. Только, опять же всё равно: посмотрите на свою личную историю посещений: у вас везде на каждом сайте стоит «1»?
4) Не подсвечено в форме активное поле
Я лично (тут я подчеркну, что буду говорить за себя) обычно не испытываю проблем с отслеживанием перемещений курсора. Одно «но»: по клавише tab курсор должен бегать предсказуемо: в том порядке, в котором читается текст. Вот когда он так не бегает — это позор разработчику.
Не подсвечено и не подсвечено. Если полей мало, они короткие и в них хорошо виден курсор — зачем держать пользователя за идиота и подсвечивать?
Гораздо лучше подсвечивать красным поля, в которые введено что-то неправильное (высший пилотаж — с комментарием что именно не нравится), и зелёным — если поле заполнено верно.
В общем, то, что в вашей статье не относится ко всем случаям жизни. Хотя подразумевается. Что, очевидно, неверно.
5) Изображения без описания
Да, не указывать alt — лоховство. Но реальная ли это проблема для пользователя, если он видит изображение и не наводит на него мышкой? Думаю, многие пользователи о таком даже не догадываются. Но как мерило профессионализма этот пункт использовать можно.
6) Фоновые изображения без фонового цвета
Хорошее замечание.
7) Использование длинных скучных абзацев текста
… или вообще подумайте — нужен ли этот скучный текст кому-нибудь. Может, вы занимаетесь ерундой, в то время, как галактико опасносте?
Я бы даже так сказал — ваш скучный текст не спасёт разбиение на абзацы и картинки. Могу привести в пример Гоголя Николая Васильевича. Уж до чего предложения наворачивал, а читают. И с удовольствием. Так что, может, дело не в длине текста и картинках? Тогда к чему данный пункт вообще?
8) Подчёркивание того, что не является ссылкой
Это хороший пункт, согласен. Но это частный случай общего: поведение должно быть понятно и предсказуемо. Чем меньше двусмысленностей — тем лучше.
Саму моду на подчеркивание ссылок не понимаю. Сейчас вообще редко встретишь подчеркнутые ссылки. Потому что CSS и можно переопределить. Вопросом «а смысл?» задаются немногие.
9) Призывать посетителей «кликнуть здесь»
Деревня, что с неё взять. С другой стороны — моим родителям понятнее, когда явно написано «click here». А css-нутую ссылку вообще можно не найти, если не искать специально (яркий пример — dirty.ru — поди пойми, где там ссылка и куда).
10) Выравнивать текст по ширине
А по-моему, отличный способ для чего-то типа газеты. Читать легко, Надо только учитывать область применения. И чтобы строка взглядом охватывалась. И рассчитывать при этом не на выпускников школы Олега Андреева, у которых поле зрения 360 градусов :-)
Просто по-вашему выходит «вообще использовать такое выравнивание — преступление». Бред ведь, согласитесь.
Ну и осмелюсь предложить навскидку пару гораздо больших преступлений, которые почему-то не вошли в список. Несмотря на.
1) Изменение привычного окружения пользователя.
Например, явное указание гарнитуры, а Какая пользователю разница, что вам нравится Georgia? Ну и пользуйтесь ей на здоровье, а у пользователя Verdana стоит. Не трогайте её.
Например, явное указание размера шрифта. Да, вы любите помельче. А пользователь, например — старый человек. Но почему-то хочет прочитать, что у вас на сайте написано. И что, получается, вы запрещаете ему это? У вас вёрстка поедет? Ха-ха, ну так сверстайте так, чтобы не поехала.
2) нет нормального поиска по сайту.
На сайте есть интересный контент, а найти нужное — проблема. Почему? Потому что обычно прикручивают поиск по любой подстроке — и на этом останавливаются.
Правильный поиск — простой и в то же время мощный. Это не отдельная страница, с кучей полей ввода, чекбоксов и прочих «интерфейсов», а одна небольшая строчка. Но при этом позволяющая искать, например, только темы в выбранных разделах, только по названию, по дате и т.д. В общем, поиск по сайту — это не только «сфинкса или гугла прикрутить».
В интернете и так уже полно всего. Надо закругляться с генерацией контента и переходить к улучшению качества его получения.
Т.к. я считаю себя пользователем, то данный пост вызван показать, как далеки «дизигнеры» от пользователей, для которых, по идее, должны стараться. Ничего не напоминает?
Вы один из пользователей, а у нормального сайта их тысячи. Поэтому Ваш пост может показать только какие мы все разные и что у каждого свои причуды. В общем субъектив у Вас.
Если вы создаёте сайты для идиотов — то нечего удивляться, что идиоты и будут туда ходить. Я попытался показать, что мне вовсе не рюшечек не хватает.
А в статье — в основном, про рюшечки.
Задача дизайнера — делать грамотно. А тут — копипаст при нежелании даже задуматься над перепечатываемым. Мне так показалось. Если не так — хорошо.
А в статье — в основном, про рюшечки.
Задача дизайнера — делать грамотно. А тут — копипаст при нежелании даже задуматься над перепечатываемым. Мне так показалось. Если не так — хорошо.
Автор поста, просто сделал перевод (за что ему спасибо), поэтому если имеются у Вас претензии или желание переубедить писавшего, то Вам логичнее идти с ними к автору статьи — Chris Spooner.
Лично мне статья понравилась, никто же не говорит что в нее должны быть заложены все постулаты и тонкости веб-дизайна и проектирования пользовательских интерфейсов.
Лично мне статья понравилась, никто же не говорит что в нее должны быть заложены все постулаты и тонкости веб-дизайна и проектирования пользовательских интерфейсов.
Убивать нужно тех, кто размещает радиобаттоны справа от лейблов, как в первом примере.
Хорошая подборка. И, можно сказать, не только для новичка. Всё мы забывает хотя бы об одном из пунктов периодически
Спасибо. Скопировал и распечатал)
Меня например больше всего раздражает когда ссылки ссылаются сами на себя.
Сейчас кстати обычно на логотип ссылку ставят, но забывают убрать её на главной странице.
Сейчас кстати обычно на логотип ссылку ставят, но забывают убрать её на главной странице.
Юзабилити-преступление 1.1:
Размещайте радио-баттоны и чекбоксы слева от описания. Представьте, что будет, если описания будут не как в идеальном случае на первой картинке, а в реальном — разной длины:
Или лучше так:
А может так:
PS. Хабрапарсер все в кучу смешал :(
Размещайте радио-баттоны и чекбоксы слева от описания. Представьте, что будет, если описания будут не как в идеальном случае на первой картинке, а в реальном — разной длины:
Или лучше так:
А может так:
PS. Хабрапарсер все в кучу смешал :(
Мои бывшие преподы поголовно преступники (последнее правило) — всегда заставляли верстать документы по ширине… Глупые стандарты, по левому краю лично мне было бы удобнее читать…
Все эти и другие оспекты подробно разобраны в книге «Веб-Дизайн» Якоба Нильсена
Как раз сейчас читаю (:
Как раз сейчас читаю (:
Самое страшное, что некоторые корпоративные системы пишутся без учёта этих правил. Мне вот по долгу службы приходится ежедневно работать с системой, в которой о правиле номер 1 не слышали…
Самое интересное, что система разработана ведущим игроком на международном рынке.
Самое интересное, что система разработана ведущим игроком на международном рынке.
Обычно очень тошнит от подборок «99 блюд из доширака», но эта сделана очень приятно.
Вот, что значит хорошо оформить.
Вот, что значит хорошо оформить.
Преступление #8: Подчёркивание того, что не является ссылкой
Еще добавить: ссылки всегда должны быть подчеркнутыми или иметь один цвет, сильно отличный от обычного текста.
это же перевод, картинки из оригинальной статьи line25.com/articles/10-usability-crimes-you-really-shouldnt-commit
автор видимо не руками, слишком уж буквы красивые.
я же для перевода нашёл примерно похожий рукописный шрифт «Chianti It Win95BT»
я же для перевода нашёл примерно похожий рукописный шрифт «Chianti It Win95BT»
Кроме первого пункта, все остальные преступление уже годами в ходят в топы 10(20,30,48) ошибок юзабилити. Преступность походу не сильно пугает)
Если честно, то я ссылки типа visited специально не ставлю.
…теперь буду.
…теперь буду.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
10 юзабилити-преступлений, которых вы не должны совершать