Как стать автором
Обновить

Комментарии 12

Java-скриптов

Может лучше «файлов javascript» или «javascript-сценариев»?
Спасибо, в текст статьи внесены поправки с учетом Ваших замечаний.
Разумно.
Примеры чудесные.
Я пока не встретил сайт, которым было бы приятно пользоваться именно со своего смартфона.
А с какими трудностями, на Ваш взгляд, приходится чаще всего сталкиваться при работе с мобильными версиями сайтов? Есть ли у Вас какие-то пожелания и идеи по улучшению юзабилити и дизайна сайтов для мобильных устройств?
1. Про оптимизацию сайтов с точки зрения их использования я дополнительно написал подробнее ниже
2. Про попытку запихнуть в мобильную версию сайта функциональность полной версии Вы сами написали выше.
3. Отдельно хочется сказать «спасибо» дизайнерам мобильных версий сайтов, которые до сих пор создают их «под стилус», благодаря чему приходится пытаться пальцем попадать в управляющие элементы разметом со спичечную головку. Яркий пример — мобильная версия сайта Яндекс-почты, где значки «предыдущее сообщение» и «Следующее сообщение» имеют микроскопический размер и размещены рядом друг с другом!
4. Еще одна тема, про которую забывают творцы мобильных порталов — Мобильный интернет на мобильных устройствах есть только эпизодически! Повальный и тотальный 3G интернет 24/7/365 есть только в воспалённых мозгах у ОПСОСОВ. В реальности, даже в поездках по центру Москвы, я могу загрузить страницу, а затем выпасть из интернета на достаточно долгий период времени. Поэтому сайты, которые загрузившись единожды, периодически пытаются что-то подкачивать, а потом начинают вопить, когда подкачать не получилось, лично у меня вызывают тихую ненависть.

Это так, только на вскидку.
Казалось бы, очевидные вещи в статье написаны, но как важно постоянно их держать в голове. Из примеров безумно понравились charlesluck.com и untapped.com.
Да, эти примеры с точки зрения эргономики весьма удачны. Мне еще bluemountain.ca нравится — емко, красиво, и система навигации неплохо продумана.
У меня на телефоне открылась такая же версия, что и на компе.
Очень классно сделан stephencaver.com/ — попробуйте уменьшить окно браузера. Такой сайт отлично выглядит как на экране мобильника, на и на fullhd-мониторе.
Хорошие мысли в правильном направлении.
Но я бы построил причинно-следственные звязи по-другому.
Дело не в том, что на экране мобильного устройства размещается меньше информации, а в том, что мобильные устройства (а) используются по-другому, (б) люди при помощи мобильных устройств решают другие задачи. Это должно быть в фундаменте понимания «мобильного» сайта.
Пытаться перенести функционал «большого» сайта на «мобильный» — это в корне неправильная идея, изначально обеспечивающая провал проекта (ну, если не провал, то уж точно, уничтожающая его успех). Прежде чем рассуждать о дизайне страниц, нужно решить следующие вопросы:
1. Какие именно цели будут пытаться достичь пользователи, используя именно мобильную версию, а не полную? Очень часто цель использования мобильной версии продукта будет другой по сравнению с полнофункциональной. Например, в мобильном банкинге я с очень малой вероятностью буду выполнять ежемесячные платежи за коммунальные услуги — это я спокойно сделаю в какой-нибудь из вечеров с домашнего ноута, а вот информация о ближайших к моему текущему местоположению банкоматах, в которых в настоящий момент есть наличные доллары (ну или просто рубли) — эта информация дорого стоит! Но для «полной» версии сайта информация о наличии наличных ^_^ в банкоматах будет иметь чисто академический интерес.
2. Второй вопрос — приоритезировать сценарии использования продукта (гм, думаю понятно, что сперва эти сценарии надо проработать). Чем пользователь будет пользоваться чаще, а чем — реже. После чего сфокусировать свои силы на реализации сценариев первого приоритета, а всё остальное оставить на потом. На пример, для клиентов соц.сетей наиболее часто будут использоваться сценарии «Что нового у друзей», «Чат с другом», «Обновление своего настроения» или «Публикация фотографии». Мало кто с мобильного устройства будет постить достаточно пространные публикации в ЖЖ, например.

А вот когда определены цели использования мобильной версии сайта (сервиса), установлены решаемые при её помощи задачи, расписаны сценарии, тогда уже разбиение на экраны станет просто очевидным делом и, действительно, надо будет думать о дизайне и виде иконок, кнопочек, гиперссылочек и т.п.
ничего… порой тепло. Но конец — полная благоглупость.
Спасибо за интересные дополнения. Кстати, перенос большой версии сайта на мобильный является весьма и весьма распространенной ошибкой: так, в мобильных версиях можно встретить объемные тексты (а читать их с телефонного экрана весьма и весьма неудобно) или изображения в неудобных форматах. Поэтому представляемой в мобильной версии информации стоит уделять повышенное внимание. А что бы разобраться, какую информацию и в какой форме размещать на сайте, нужно сделать все, что Вы описали выше.
Как Вы думаете, какими методами следует выявлять и анализировать пользовательские цели и приоритетные сценарии: анкетирование? Опрос? Какие-то особые методики юзабилити-тестирования для мобильных устройств? Буду очень признателен, если Вы поделитесь информацией по данным вопросам. И еще: можете ли Вы привести примеры удачных (с точки зрения эргономики и дизайна) русскоязычных мобильных сайтов?
Эталонной книгой по обсуждаемому сейчас вопросу я считаю книгу Алана Купера в соавторстве с Робертом Рейманом и Дэвидом Крониным «Об Интерфейсе». Очень объемный и познавательный труд. Судя по задаваемым Вами вопросам, начинать стоит именно с него, а потом уже все уточняющие и дополнительные книги. Но вашим коллегам, которые будут работать с вами плечом к плечу, я бы обязательно посоветовал прочитать предыдущую книгу Алана Купера — «Психбольница в руках пациентов». Это как Букварь, как Библия идеологии Проектирования Взаимодействия. А «Об Интерфейсе» — это уже более детализированное учение. В первых главах как раз и рассказано, как, зачем и каким образом собирать исходную информацию для проектирования.
Забегая вперед могу сказать, что да, анкетирование и собеседования — это основные инструменты подготовки исходных данных. Экспертная оценка не всегда может быть применима для тех случаев, когда вы создаёте что-то совсем уж новое.
К сожалению, совсем уж эталонных примеров мобильных сайтов пока мне встречать не приходилось. Пока я больше работаю с клиент-серверными решениями, каковыми, в частности, являются клиенты для мобильного банкинга и разных соц-сетей. Там вопросы стоят чуть по-другому, но их перечень точно такой же.
Зарегистрируйтесь на Хабре , чтобы оставить комментарий