Безвкусица

Раздача ссылок

2012-01-13 01:58:00

Так выглядело распространение ссылок раньше:

Так выглядит раздача ссылок сегодня:

Мимикрия

2011-07-21 00:00:00

Совпадения иногда бывают чрезвычайно невероятными.

Причёсанный гугл

2011-06-30 18:58:00

Свершилось. Гугл наконец-то переделал все основные страницы, чтобы они выглядели одинаково и аккуратно. Теперь миллионы людей ежедневно будут видеть хорошую картинку. Раньше это было печальное зрелище.

Список в кнопке Назад Фаерфокса 4

2011-03-24 11:23:00

В новой версии браузера Фаерфокс разработчики решили убрать стрелочку, скрывающую список посещённых страниц. Таким образом этот элемент совсем потерял визуальное обозначение. А значит у новичков теперь мало шансов узнать и обучится этой функции.

Тем не менее, этот список можно по прежнему вызвать — правым кликом или долгим левым кликом.

Новости компании

2011-03-22 14:00:00

Иметь на сайте раздел с новостями — серьёзное испытание здравым смыслом. Надо правильно расположить дату, заголовок, содержание новости, и при этом написать что-то осмысленное. Это не каждому под силу. Вот три скриншота с различных сайтов.

Пунктирное подчёркивание

2011-03-22 04:57:00

Пунктирным подчеркиванием традиционно отмечают элементы, которые изменяются без перезагрузки страницы. Неприятной стороной пунктира является его высокая визуальная шумность, много штрихов которые приходится воспринимать как один объект. На сайте Фонда развития Инновационного центра «Сколково» этот элемент используется в тексте очень часто, чем серьёзно затрудняет чтение.

Подготовка текста к публикации

2010-03-25 00:00:00

На страницах справочника Билайна можно встретить комментарии от составителя текста к публикующему текст в интернете сотруднику:

Стоит отметить, что в подобных текстах «вы» и «ваш» надо писать с маленькой буквы. А в тексте гиперссылки избегать бессмысленного «здесь».

Вертикальная линия mail.ru

2010-03-17 00:00:00

На главной странице сайта mail.ru средняя колонка не выровнена по вертикальной линии левого края. Это выглядит очень неряшливо.

Чтобы страница стала аккуратнее достаточно выровнять по левому краю существующие блоки.

Наведите на изображение, чтобы увидеть разницу:

Ползунок громкости в плеере YouTube

2010-01-31 00:00:00

В новом интерфейсе плеера на Ютюбе появилась возможность выбирать разрешение видеоролика через раскрывающееся меню. Это меню сделали таким, что оно стало мешать изменять уровень громкости.

Кроме возникшей путаницы с «горячими зонами» есть ешё одна проблема. Очевидно, что изменять уровень громкости приходится значительно чаще чем изменять качество видеоролика, а значит, в соответствии с законом Фитсса, горячая зона для раскрытия ползунка уровня громкости должна быть больше.

И вообще, не понятно зачем прятать громкость в раскрывающееся меню за маленькой кнопкой — на панели достаточно места чтобы уместить этот ползунок.

Логотип Bing

2009-12-22 00:00:00

Логотип поисковой системы Bing достаточно прост — всего четыре буквы зарифмованные округлостью и шириной штрихов. Столь выраженная геометричность не позволила авторам сделать надпись изящной. При этом, в столь простых конструкциях букв хромает качество контуров.

Листалка

2009-12-10 00:00:00

Один из многочисленных примеров бездумной реализации навигации по страницам.

Регистрация на сайте Эпсона

2009-12-02 00:00:00

При регистрации на сайте компании Epson необходимо сперва выбрать форму обращения, «господин» или «госпожа», а затем указать свой пол «мужской» или «женский».

Буллеты в меню

2009-11-20 00:00:00

Буллеты, стрелки, кружочки, квадратики и прочие мелкие формы возле каждого пункта меню всегда лишний мусор.

Исключение: можно рассмотреть вариант поставить какой-либо аккуратный символ в начале списка если названия разделов многословные. Когда названия приходится писать в несколько строк.

Плашки и рамки в данном случае тоже лишние.

Бледное оформление

2009-11-12 00:00:00

Сайт федеральной службы по труду и занятости trudvsem.ru весь голубого цвета. Голубой логотип, голубое меню, голубые заголовки и голубой контент.

Бледность сайта создает сложности в чтении текста (на сайте много текстовой информации) и мешает различать ссылки (ссылки не подчеркнуты и того же цвета что и текст).

Типичные ошибки

2009-04-28 00:00:00

Чтобы понять, что сайт делали малоопытные разработчики, достаточно обратить внимание на типичные ошибки.

Вот, например, сайт студии дизайна «ART-СТУДИЯ — все в on-line»:

Типичные ошибки:

Логотип на главной ведет на главную;
Пустая ссылка;
Не прописан белый фон по умолчанию.

Первый пункт — частный случай проблемы, когда какая-либо ссылка ведет на ту же страницу на которой она расположена. Эта ошибка — первейший индикатор непрофессионализма разработчика. Это сигнал того, что разработчик не понимает что такое удобный интерфейс и что означает термин «гипертекст».

Вторая проблема возникает когда «дизайн обгоняет контент». Придумали что на этом месте будет ссылка, а куда она ведет не придумали. Такая ошибка возникает когда у разработчика нет цельного представления сайта.

И третья ошибка-индикатор возникает когда разработчики не отдают должного внимания отображению сайта с учетом пользовательских настроек. Скорее всего не было проведено и должной проверки на работу в различных браузерах, при различных разрешениях экрана и при различных масштабах страницы.

Добавка: ART-СТУДИЯ отреагировала весьма оперативно и поправила ошибки. Тем не менее там остались другие, о которых я не упоминал в этой заметке.

Автоматическая обработка текста

2009-04-14 00:00:00

Причина, по которой смайлики не должны заменяться на картинки автоматически.

Сбербанк, который хочется облизать

2008-12-29 00:00:00

Не секрет, что современный Веб-два-ноль-стайл пользовательского интерфейса заложили в компании Apple Inc создав стиль «Aqua». С тех пор утекло много воды, а стиль по прежнему не даёт многим покоя.

В новый 2009-ый год Сбербанк России входит с сайтом-карамелью:

Авторы проявили чрезвычайное непонимание изображаемого. Белая палка на зелёной кнопке — это блик. А серый полукруг — это изображение освещения на сгибе:

Простой способ оценить качество сайта

2008-12-11 00:00:00

Карта сайта многое говорит о качестве самого сайта. Эта страница лучше других демонстрирует понимание задачи разработчиком — буквально это и есть краткое содержание технического задания.

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

Горизонтальное меню

2008-11-21 00:00:00

На сайте «Билайна» есть страница с выбором тарифов. Очевидно, что быстро найти интересующий пункт в таком списке очень трудно, придется читать всё по порядку:

В русском языке пишут по горизонтали. И только из-за этого меню с большим количеством пунктов стоит располагать на экране вертикально. Чтобы понять это достаточно вспомнить как складывают брёвна на лесозаготовках или пачку спагетти.

Кроме того, выхватить взглядом нужный пункт из вертикального меню гораздо проще — начало строк находилось бы на одной линии.

Снова Яндекс

2008-08-20 00:00:00

В новой версии Яндекс.новостей привычный навигационный блок, который обычно располагался под поисковой строкой, переехал наверх. При этом вместо раздела «Все службы...» появилась закладка «еще ▼».

Всё вместе это стало напоминать раздел с новостями в Гугле.

Нельзя сказать, что это плохое дизайнерское решение. Наоборот, причины нововведений вполне ясны. Но в данном случае Яндекс лишил себя той самой индивидуальности, ради которой стоит пренебрегать мелочами в удобстве.

Яндекс.Баги

2008-07-05 00:00:00

В новой версии поиска по блогам яндекса стало сложно ориентироваться. На скриншоте ниже виден средний столбец со словами на бежевом фоне. Догадаться о том, что он является навигацией, которая относится к правому столбцу можно лишь проведя по среднему курсором мыши — правая колонка начнет меняться, сработает ява скрипт.

Единственный намек на то, что средняя колонка управляет правой — оранжевый треугольник. Но если вам захочется выбрав раздел «СМИ» кликнуть на Lenta.ru, то вам придется аккуратно обойти мышкой другие пункты среднего столбца. Поскольку иначе правая колонка переключится на другой раздел. Такой 2.0.

Разделители в меню

2008-06-07 00:00:00

Существует множество элементов оформления, которые появились из-за ограниченности выразительных средств давних времён. Например, использование различных символов в качестве разделителей ссылок меню. Если когда-то давно это было оправдано, то сегодня такое оформление безосновательно и архаично.

В качестве примера рассмотрим сайт Новой газеты. В шапке сайта используются три способа разделения меню:

Сама идея разделения ссылок какими-либо элементами плоха. Лучший разделитель — пустое пространство. Вертикальные линии приходится «читать» как и сами ссылки. А косая черта в качестве разделителя придаёт написанному совершенно другой смысл. Её традиционно используют в качестве разделителя иерархического пути.

Пароль на MySpace

2008-05-28 00:00:00

На сайте MySpace.com форма регистрации требует соблюдения сложности пароля.

Впрочем, действительно сложный пароль ввести не удастся, здесь тоже есть ограничение.

Такие проверки — издевательство над пользователем.

Дополнительным издевательством является то, что между полями нельзя переключаться клавишей Tab. Все 300 миллионов зарегистрированных пользователей были вынуждены тыкать мышкой в каждое поле по очереди. То есть, на этой странице было совершено, по крайней мере, 3 миллиарда лишних движений — цена простой ошибки разработчика.

Фотография человека

2008-02-28 00:00:00

Передать с помощью экрана цвет кожи человека — непростая задача. Диапазон выводимых на монитор цветов намного меньше существующих в реальном мире красок и оттенков. К тому же человеческий мозг по цвету кожи моментально распознает состояние организма — жарко или холодно, здоров или болен. Это означает, что воспроизведение цвета кожи, для правильного зрительного восприятия, требует особо деликатной цветовой ретуши.

На предвыборном сайте Дмитрия Медведева автор расположил сразу несколько портретов кандидата на одной странице. Близкое расположение фотографий делает очевидным различия в условиях освещения модели и цветового баланса камеры. Это вносит ощущение неаккуратности подачи в целом.

Особая ошибка — располагать портрет на насыщенном, в данном случае синем, фоне. Из-за этого на портрете проявляются все синие и красные пятна, превращая ровные участки кожи в контрастные. Подобный эффект можно наблюдать на всех автомобильных правах в РФ — по какой-то неясной причине фотографии на этот документ делают на ярком красном фоне, отчего лица получаются бледно-жёлтыми и покрыты красными пятнами.

Кроме того, изображения, на которых читаются различные источники света, не воспринимаются человеком как нечто единое, объединенное общей мыслью. Наоборот, они вносят разрозненность в восприятие картинки.

Контрпример: на сайте фотостудии «Стилла» мы изобразили двух человек, фотографа и модель. Каждый из них имеет разные источники освещения и цвет кожи: фотограф освещен сзади (тёмный и коричневый), а модель спереди (розовая и светлая). Но из-за подобного освещения и взаимного расположения в сцене возникает глубина и устанавливается связь между героями.

Купить билет на поезд

2008-02-14 00:00:00

Механизм бронирования всевозможных билетов, проработанный во многих областях, в интернете до сих пор не может обрести достойную реализацию — возьмём, например, покупку железнодорожных билетов.

Для начала на сайте РЖД просят зарегистрироваться. Собственно, за 40 минут, в течение которых я упорно боролся с системой, пытаясь купить билет из Петербурга в Москву, успешная регистрация стала моим единственным достижением.

Затем от меня потребовали географических знаний. Я должен был ввести с клавиатуры названия станций отправления и назначения. Я знал, что мне надо зайти в Московский вокзал в Санкт-Петербурге и приехать на Ленинградский вокзал в Москве, но как правильно называются эти станции в терминах РЖД, я, как оказалось, и не представлял. В итоге, чтобы выяснить правильные названия, мне пришлось серьёзно поработать с картой железных дорог.

На третьем десятке попыток угадать пару отправление-прибытие, я, наконец, попал на страницу выбора поезда, которую мне удалось пройти довольно быстро. Но вот на следующей странице, где нужно было выбрать вагон, что бы я ни выбирал, система неизменно сообщала:

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