Как сказал Якоб Нильсен(Jakob Nielsen) в своей недавней статье«Computer Screens Getting Bigger» — экраны компьютеров становятся больше.(На что кстати сослался Лебедев =)).
Дословно, гуру юзабилити сказал следующее: "Дизайнеры должны начать экспериментировать со способами утилизировать горизонтальное пространство экрана, и создавать веб-страницы с улучшенным взаимодействием для людей с большими и широкоэкранными мониторами.(Они так же должы использовать методы, такие как responsive design, для продолжения поддержки маленьких экранов, которые будут с нами до конца десятилетия)".
И вот вопрос вам, дорогие читатели — как мы можем это сделать?
В моей практике, я использовала несколько простых приёмов:
Если у вас есть, каталог товаров — вы можете использовать float или inline-block, чтобы разместить их на экране.
Вы можете использовать css media queries или их js-эквиваленты, например чтобы сделать размер текста или картинок больше и т.п.
Вы можете просто задать свойства min- и max-width для вашей обёртки контента(такой как body). Я так делаю в вёрстке блога, чтобы задать размер статей между 1000 и 1200px по ширине, для меня 1200 — это предел читабельной ширины строки текста. Так же я делаю для магазинов, чтобы при разрешении 1920px они не выглядели плохо.
Если ваш сайт, на самом деле веб-приложение, например онлайн игра, тогда вам нужно принимать целый комплекс мер, который относится к разработке пользовательского интерфейса, особенно оптимизируя сайт под мобильные устройства, так что я спрашиваю не о них.
Так же потихоньку разрабатывается свойство css text-size-adjust. Говорят на уровне префиксов кроме мозиллы уже поддерживается в -webkit- и -ms-, возможно можно использовать его.
Итак, вы владелец сайта, например блога, такого как мой, или магазина. Если вам гипотетически потребуется оптимизировать его для использования на мониторах шириной 2000 или 4000px, что бы вы использовали?
Или, представьте, что все дисплеи в мире шириной 4000px(не говорим про планшетки), может ли это изменить всю парадигму сайтостроительства? Какие изменения в интерфейсе браузеров могли бы произойти?
PHP-программисты часто делают пару ошибок присущие авторизации, которые впрочем легко исправляются. Все ошибки описанные ниже были исправлены на рабочем сайте в течение получаса, написание статьи заняло у меня в 5 раз больше времени.
Итак, для тех кто не использует ночные сборки Файрфокса, будет новостью, что в последних версиях лисички не работают редиректы с включенным расширением Adblock (bug 23092).
Казалось бы, что может быть важного в редиректах? Однако ньюансы программирования таковы, что часто для попадания на какую-то страницу нужно пройти через ряд промежуточных. Это касается поиска, авторизации и т.п. отправки форм.
Хочу поделится результатами пользования популярными сервисами с отключенными редиректами.
У mail.ru вроде бы всё работает. по крайней мере почта и поиск
у рамблера работает авторизация на почту, но не работает поиск
у гугла наоборот, работает поиск, но не работает авторизация в гмайл
у яндекса не работает вообще ничего. Что не удивительно, ведь "поисковик №1" всегда отличался пренебрежением к веб-стандартам и удобству пользователя.
на любимом хостинге Jino.ru, не работает регистрация.
Недочёты есть и в авторизации PhpMyAdmin, и в шаблонах страниц nginx'а.
Под словом "работает" я подразумеваю. что или редиректов не используется, или каждый редирект дублируется ссылкой, которую можно нажать. Соответственно "не работает", когда видно только пустую страницу, или вообще что-то невнятное (как в случае с авторизацией на яндексе).
Я призываю веб-мастеров прошерстить свои движки на предмет дублирования редиректов соответствующими ссылками. Даже в движке моего бложика были проблемы с авторизацией, которые оперативно устранились.
Сегодняшняя поучительная статья будет о правилах регистрации пользователей.
Не секрет, что многие владельцы сайтов думают что их сайт/портал неоспоримо главный сайт в интернете и в жизни каждого пользователя. Если и у вас хватает самомнения думать так — не читайте дальше.
Много лет назад существовала возможность принудительно сделать сайт стартовой страницей, пока эту непотребность не запретили. До сих пор многие сайты агитируют сделать их сайт главной страницей или хотя бы добавить в избранное. В основном это мелкие доморощенные сайты, хотя масшаб катастрофы в умах менеджеров и владельцев сайтов настолько широк, что даже такие гиганты как яндекс, mail, rambler и даже Yahoo, используют подобную кнопку. Я всегда считала и считаю сейчас, что это крайне дурной тон — решать что-то за пользователя. В случае рамблера кнопка вообще ведёт на страницу для идиотов с инструкциями как назначить стартовую страницу. Что касается кнопок «добавить в избранное», то тут надо понимать, что если пользователь не умеет сам добавлять сайт в закладки, то он что-то добавленное скриптом и не найдёт в них.
Но… дело конечно не в стартовых страницах. Сайтовладельцы так самолюбивы, что часто из-за глупых прихотей, причиняют неудобства своим пользователям. Сегодня я хочу рассмотреть процесс регистрации на конкретном сайте большой мелкомягкой компании, и констатировать свои мысли по этому поводу.
Сейчас я покажу вам особую, скроллбарную магию. Шучу конечно, ибо о полосе прокрутке (скроллбаре) я хочу сказать совсем немного, и эта заметка будет небольшой. Статья посвящена прежде всего вертикальной полосе.
Некоторые дизайнеры, не любят делать резиновые дизайны, ссылаясь на то, что сделать фиксированный размер проще, и это действительно так. Мы привыкли называть резиновым — дизайн, который растягивается по высоте и ширине, потому что у всех разная ширина экрана и этот дизайн растягивается под любую из них. Однако, правильное растягивание по высоте — тоже является проблемой. Поэтому самый простой дизайн — дизайн не растягивающийся ни по ширине, ни по высоте. Но как же быть с контентом? Ведь количество контента на странице нельзя сделать фиксированным и он всё равно начнёт вылезать вниз?
Когда меня спрашивают как сделать чтобы контент страницы не вылазил за пределы блока, а например скроллировался, я указываю на свойство
overflow:auto;
Теперь расскажу чем это чревато для пользователя:
Во-первых, пользователь не привык что полоса прокрутки контента страницы будет в другом месте. Смотри статью «Привычки пользователя».
Во-вторых, в полосу у границы экрана гораздо легче попасть. Смотри статью «О границах экрана».
В-третьих, на скроллируемом участке, по-умолчанию не работает колёсико мыши или клавиатурная навигация, только при переходе в заданную область.
На небольшом разрешении, например мобильного браузера, у вас могут появится несколько скроллбаров, что запутает пользователя.
Этих причин — хватает, чтобы отказаться от идеи использовании скроллбара, в месте для него не предназначенном. Сделать дизайн растягивающимся по высоте можно (и нужно) в 99.9% случаев.
Многие начинающие разработчики никогда не задумываются о том что у экрана есть границы. Возможно и вы не задумывались. Чем же взаимодействие с программой вблизи границ экрана отличается от остального пространства? Тем, что границ очень легко достичь — достаточно сильно подвинуть мышку в какую угодно сторону и курсор окажется точно у границы.
Как этим воспользоваться? Приведу пример окна плейера WinAmp, когда вы подвигаете его к границе на расстояние несколько пикселей — окно приклеивается к ней. В результате вам становится гораздо проще расположить его точно сверху или точно слева например. Когда вы подвигаете окно какого-нибудь im-клиента, например Миранды, вбок - окно приклеивается к границе экрана и подвигает все остальные окна так чтобы всегда быть на виду. Кнопка закрытия любой программы — крестик — всегда находится точно в правом верхнем углу, поэтому вам достаточно швырнуть мышку в этот угол и кликнуть чтобы закрыть приложение.
Менеджер виз-эффектов Compiz — в ос. Linux — позволяет назначить особые действие при наведении пользователем на границы экрана (см. картинку выше).
Если вы ещё не знаете как эту статью можно использовать применительно к веб-дизайну и вёрстке — читайте мою следующую, давно обещанную статью о скроллбарах.
Привычка пользователя, это возможно самое важное что у него есть. Всем дизайнерам, юзабилистам, разработчикам интерфейсов, программистам и т.п. хочу сказать архиважное правило:
Правило: Если вы будете настойчиво пытаться изменить привычки пользователя - пользователь изменит вам, рано или поздно!
Привычки пользователя можно изменить только когда у него их вообще нет. Пользователя можно заставить привыкнуть к тому что окно приложения закрывается на крестик в углу. Заставить привыкнуть к тому что теперь на крестик будет вылетать птичка нельзя. В подтверждение этому правилу читайте следующие несколько статей.
Приветствую всех. Поскольку до нового года я страшно занята, поэтому не писала. Но я постараюсь писать на выходных. Несколько интересных мыслей и просто переводных статей я очень хотела бы выложить.
Однако, сегодня есть кое что, о чём я не могу не написать, и о чём почему-то никто не упоминает. Это использование русского языка в автоматически генерируемом контенте, особенно в словах которые изменяются от числа. Например форма которую можно увидеть в 90% онлайн магазинов (даже таких крупных как ozon.ru, eldorado.ru, 003.ru):
Корзина: Товаров 0 шт. Общая сумма 0,00 руб.
Вам это не режет глаз? Нет? А мне ужасно режет, мне кажется автор сильно не любит людей. Слава роботам, убить всех человеков!
Во всех магазинах созданных нашей компанией можно видеть туже строчку, но на русском языке
Корзина:
В вашей корзине 3предмета общей стоимостью 73370 руб.
В данном случае покупатель видит что работу делали профессионально и с душой, а не для галочки.
Строку навигации, также называют "Навигационной цепочкой", или "Хлебными крошками", у Лебедева она названа "дублирующей" (§49 ководства). Поскольку дизайнеры очень часто её в макетах рисуют, а заказчики очень часто на сайте требуют, да и просто используют где попало, я бы хотела рассказать когда её следует применять.
Если бы я хотела сделать для этой новости строку навигации, она бы выглядела так:
Можете пройти по ссылкам этой строки и убедиться что они работают как надо. Во-первых, они правильно дублируют ЧПУ (friendly url), во-вторых, на каждой из них ожидаемый контент. (Такая навигация подойдёт для крупного новостного сайта, где каждый день появляется несколько новостей). Почему же я везде не сделаю такую строку навигации? Обратимся к Лебедеву. Когда я задумывала писать эту статью я смутно помнила что он вроде бы этот вид навигации 9 лет назад очень хвалил, и уже хотела написать опровержение. Ан нет, всё оказалось не так просто, цитирую §49 ководства:
Правило: дублирующую навигацию следует использовать во всех случаях, когда присутствует логическая вложенность содержания, но отсутствует отдельное боковое меню,то есть практически на всех информационных сайтах.
Прошло 9 лет и отдельное боковое меню практически на всех информационных сайтах присутствует. Поэтому посмотрите Lenta.ru, Rambler, Яндекс, Википедию — у них строки навигации нет. Почему? Потому что ссылки на категорию в которой эта статья есть и так присутствуют в других местах. Излишнее дублирование ссылок — это вредно. Как видно из статьи Лебедева "дублирующая" навигация — призвана дублировать адресную строку ЧПУ, а не уже размещённые ссылки. В качестве уместного примера использования такой навигации предлагается посмотреть сайт Б.Акунина.
Многие начинающие разработчики никогда не задумываются о том что у экрана есть границы. Возможно и вы не задумывались. Чем же взаимодействие с программой вблизи границ экрана отличается от остального пространства? Тем, что границ очень легко достичь — достаточно сильно подвинуть мышку в какую угодно сторону и курсор окажется точно у границы.