Лого vc.ru

«Дизайн интерфейсов для моей мамы»: 6 советов, как сделать сайт удобным для всех

«Дизайн интерфейсов для моей мамы»: 6 советов, как сделать сайт удобным для всех

Дизайнер, разработчик и креативный директор iFixit Тони Гинес поделился в своём блоге на Medium своими взглядами на то, каким должен быть дизайн, чтобы им могли пользоваться не только молодые люди, но и их родители. Редакция vc.ru публикует перевод колонки, выполненный командой Live Typing.

Поделиться

Пару раз в год я езжу в гости к своей маме. Через два-три часа она говорит что-то вроде: «Слушай, ты не посмотришь мой компьютер? Я просто хочу убедиться, что с ним всё в порядке. Ты же понимаешь, я не понимаю, что делаю».

А ведь ей хотелось бы понимать.

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

Каждый раз, когда я создаю новый вебсайт или интерфейс, я непременно вспоминаю о своей маме.

Моя мама выходит в интернет через другой браузер

Она предпочитает Internet Explorer. Восьмую версию, если конкретно. Почему? Он ей знаком. Она знает, где что находится и как им управлять. В чём проблема? У неё установлены чуть ли не все панели инструментов, какие только возможно, и ни одну из них она не установила по своей воле.

Она также недостаточно уверена в своих знаниях, чтобы удалить ту или иную панель или просто обновить браузер — ей кажется, что она что-то сломает. Я установил ей Google Chrome пару лет назад, но всё равно замечаю, как она возвращается к IE. Ей кажется «принудиловкой» использование Chrome и она обвиняет его каждый раз, когда сайт не открывается. И хотя с IE проблем не меньше, ей с ним комфортно.

Вывод: Если большая часть вашей аудитории будет просматривать ваш сайт на старом браузере, они не будут обвинять браузер, когда у них что-то не получается. Они обвинят дизайн сайта.

Моя мама не понимает возможностей большинства сайтов

Сайты вроде Facebook и Google Plus — это кладезь возможностей для загрузки и обмена фотографиями с любых видов устройств.

Для вас и меня поделиться чем-то просто: сделайте фото с телефона, нажмите нужную кнопку — и готово. Моей маме для тех же целей до сих пор проще воспользоваться почтой. Профиль на Facebook у неё есть, но её пугает неопределённость, делится она фотографиями со своей семьёй или с АНБ. Google Plus ещё более чудовищен.

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

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

Моя мама не понимает иконки

Мы полагаем, что все знают назначение иконки «Сохранить». Моя мама много лет использовала флоппи-дискеты, но напрочь забыла об их функциональности.

В каждом интерфейсе я вижу, что для «Нового документа», «Копировать», «Удалить» используются только иконки. И как-нибудь я сяду с мамой изучать очередной интерфейс телефона и попрошу удалить файл только ради того, чтобы понять, что «Удалить» — это иконка. В таком случае я скажу, чтобы она искала иконку мусорного бака, или знака Х, или чего-то такого.

Однажды, когда она нашла нужную иконку, то сказала: «Почему мне просто не скажут “Удалить"?». Гениально, по-моему.

Вывод: Иконки облегчают обращение с интерфейсом и экономят место. С ними вы не беспокоитесь о длинных текстах на тулбаре или о трудностях перевода. Неудивительно, что иконки часто используют где надо и не надо. Но если пользователь не понимает дизайн, что в нём хорошего? Используйте рядом с иконками пометки-описания, которые объяснят, что иконка А означает действие Б. Вот отличная статья на тему иконок.

Моя мама — не продвинутый пользователь

Я не помню, сколько раз я объяснял своей маме, что комбинации клавиш Ctrl + C и Ctrl + V нужны, чтобы скопировать и вставить что угодно. Она так этого и не запомнила, и это нормально. Жесты для неё и подавно вновинку.

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

Однажды я не дозвонился до мамы, и меня перенаправили на её голосовую почту: «Здравствуйте. Я не могу сейчас ответить. Назовите своё имя и номер, и я перезвоню, как только смогу».

Мама не понимает, что её iPhone сам сделает эту работу. Он покажет ей пропущенный звонок, время звонка, номер и имя, если маме знаком этот человек. Тем не менее, она оставляет такие вот послания, это происходит автоматически. Если iPhone скажет ей записывать сообщения по-другому, это решит проблему? Возможно.

Вывод: Фичи для продвинутых пользователей — хорошо, а учить быть такими пользователями — ещё лучше. Не надо надеяться, что пользователи знают, как копировать и вставлять с помощью горячих клавиш, и понимают, что пора прекращать делать всё по-старому. Учите их, как работать с интерфейсом быстрее, но постарайтесь не отпугнуть новых пользователей.

Моя мама не имеет ничего против кликов

Есть расхожая мысль о том, что чем больше количество кликов, тем хуже пользовательский опыт, и я её ненавижу. Я считаю себя весьма опытным пользователем интернета и не помню, чтобы хотя бы раз я жаловался на слишком большое количество кликов на пути к цели.

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

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

Моя мама хочет нормально работать и не теряться

Основных причин для пользования интернетом у моей мамы три: оплата счетов, Netflix и переписка с детьми. Раз в пару месяцев Facebook меняет свой интерфейс, и маме приходится учиться заново всему, что она уже знала. У неё одна надежда: все важные иконки и меню там, где она их привыкла видеть.

Netflix в этом плане молодцы, их интерфейс всегда узнаваем и даёт чувство уверенности. А вот Facebook — нет, и мама надеется на то, что однажды фото её детей и внуков не пропадут с её стены по воле разработчиков.

Сайт её банка не менялся семь лет, работает на IE 8 и там есть подсказки на английском, и ей очень просто им пользоваться. Его дизайн настолько компактен, что спокойно помещается в окне, захламленном панелями инструментов.

Вывод: Обновляя дизайн сайта, вы рискуете потерять лояльных пользователей, которые не захотят учить заново местоположение опций и меню и раздражённо уйдут. Некоторые старые элементы стоит оставлять на своих местах. Можно сделать иконки посимпатичнее, но не лишайте сайт узнаваемости.

Заключение

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

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

Присылайте свои колонки и интерфейсные кейсы на interface@vc.ru

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Вы извините, но что теперь делать? Не обновлять дизайн, не использовать знакомые большенству элементы управления? Если уж на то пошло, то моя бабушка не любит отправлять фото по электронной почте, для нее это не привычно. И поэтому я предлагаю сосредоточиттся на выпуске альбомов и печати фото. Абсурдно же получается.
P.S Делать отдельный интерфейс для людей в возрасте конечно вариант, но зачастую стоимость этого варианта не оправдает ту малую аудиторию которую привлекает.

собирать фокус-группы из людей разного возраста и опыта и делать юзабилити-тесты

это если бюджет безмерный... а если он лимитирован?

0

Тестирование можно и бесплатно провести, дело не в бюджете.

>Вот отличная статья на тему иконок.
Где?

0

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

0

Еще неплохая статья: <a href="http://sketchapp.me/ux-issledovanie-nuzhen-li-ikonkam-tekst/">UX исследование, нужен ли иконкам текст?</a>

0

Блин, как удалить или отредактировать коммент?)

0

Никак :D
Сейчас почитаю, спасибо

0

Вывод нанимайте мам в UI-дизайнеры :)

живо вспоминается мелькавший на VC проект «Бабушка подскажет», где можно было в формате видеочата обсудить с рандомной бабушкой свой дизайн

Это не статья. Это блого-запись с личными размышлениями одного чувака. Ибо пользовательский опыт одной англоговорящей бабушки даёт ничтожно мало полезной информации разработчикам/предпринимателям (на кого вы тут нынче ориентируетесь?).

Все советы сводятся, либо к банальным истинам, которые и так все должны знать (подписи к иконкам, разбиение большой формы на страницы, визуальные подсказки к действиям), либо к одному совету - пользователи не любят изменений.

Особенно "порадовала" история про отправку фотографий электронной почтой. Вот моя мама начала пользоваться интернетом, когда электронная почта уже прошла пик популярность, а соцсети её набрали. Она ничего не знает про электронную почту (у неё её вообще нет), зато она не испытывает никаких проблем в отправке фотографий через личные сообщения ВКонтакте. И это связано не с возрастом, а лишь с моментом знакомства пользователя с новыми технологиями.

Любая навигация (любое состояние интерфейса) должны отвечать на три вопроса — «Где я нахожусь?», «Что я могу сделать?», «Куда я могу пойти?». А все остальное — это надстройки.

Подпишусь, невероятно раздражает интуитивная непонятность многих гугол продуктов, хочется дезигнеру руки вставить туда, где им место.

С фейсбуком же все просто. Просто кровь из глаз.

Кровь из глаз ручьем льется. Максимум форма" залогнться с помощью фейсбук"

0

Вот подпишусь под каждым словом. Юзаю каждый день продукты Яндекса - Почта, навигатор, карты и т.д Интерфейсы продуманы, логичны и не требуют привыкания. Иногда приходится пользоваться сервисами гугла (не по своей воле), так вот в эти моменты хочется пойти к руководителю отдела вёрстки и дизайна и так по братски сказать: - Мужик, ну ёп твою на лево! Ты вообще видел что за х...ню рисуют твои подопечные?!

С фейсбуком таже история. После "Френдли" интерфейса "ВКонтакте" хочется обоссать и сжечь монитор, лишь бы не видеть это ужос

Дело вообще не в дизайне. Просто людям в возрасте в принципе сложнее учиться новому. Мне всё описанное живо напомнило мою маму, кстати) С той только разницей, что она не предъявляет претензии к дизайну сайтов, она просто хочет раз и навсегда научиться работать с этим сайтом/программой/приложением на смартфоне, и чтобы ничего не переделывали.

После текста про IE8 дальше читать не стал... Ага, ща мы забъём на FlexBox и прочие ништяки CSS3, перестанем юзать топовые библы типа React'а, да и вообще, откажемся верстать с использованием JS и вернёмся на старый-добрый-отстойный стек HTML4.01/CSS, ради менее чем одной десятой процента юзеров :)

Из статьи понял только то, что мама этого чувака ничего не понимает в технологиях и не хочет ничему учиться, хотя он уверяет, что это не так. Моя мама легко перешла с Windows + Firefox на Debian + Chrome, когда я устал вычищать ее нетбук от вирусов, вот как человеку было важно делать свои дела в интернете. А если ничего не понимаешь и не пытаешься понять - иди вязать носки.

А фейсбук и гугол ложат на эти 6 советов, потому что им и так хорошо, деньги льются рекой. Подумаешь, чья-то мама к ним реже заходит. Всё равно её с такими навыками не монетизируешь.

0

А моя мама перешла с винды на мак за одини вечер под моим чутким контролем, да еще на два монитора! Сейчас вместо звонков 5 раз в день с вопросом -"что мне нажать, у меня спрашивают...?" она звонит и.... А она вообще не звонит кстати теперь!
А если по теме, считаю что главной кнопкой на сайте должна стать "умная" кнопка поиска... Главное чтоб не тупила, а делала все то, что от нее ждут и "умные" и "мамы"... Но к сожалению дизайнеры на это не обращают внимания, им главнее... Ну вы сами знаете что...

Кстати все произошло после того же самого осознания, что стоимость моего времени затраченого на исправление последствий вирусов превышает стоимость мака)

0

Поставил маме антивирус за 1000 руб, и даже не представляю, сколько сейчас может стоить мак... Да и вирусы - наверно последний в списке пунктов, зачем на етот самый мак переходить

Я отдала свой, лежал без дела..(на докризисные купила). Я тоже ставила касперского за 1000, но не помогало... У всех разные мамы... И разные способы решения проблемы "мам")

0

Зато всё понятно!
*петросян.жпег*

0

А чего все так в штыки воспринимают то? Вопрос ведь в изначальном анализе целевой аудитории. И если ЦА ресурса — это мама автора статьи и её сверстницы, то решение должны соответствовать особенностям их восприятия интерфейса и тех.требованиям браузера, из которого они взаимодействуют с сайтом.

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

Всё верно написано. Разве не так?

да всё круто и правильно автор излагает,
поэтому и перевели,
мы вот, например, делали сайт одной исторической московской гостинице, так там было требование поддержки чуть ли ни ИЕ6, и ничего — справились

0

Вот да. Все комментаторы почему-то упустили момент с ЦА.

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Дмитрий Лимонов

потому что ресторан не означает "дорого, бохато", как привыкли в РФ. Это всего лишь пункт общественного питания. Да, есть элитные рестораны, а есть в формате закусочных. Мир не кончается там, где ваши представления о нём не совпадают с реальностью.

«Будьте нашим гостем»: кому McDonald's даёт право бесплатно есть в своих ресторанах
0
Владимир Тихомиров

Похоже, пора на собеседовании в Яндекс спрашивать, в самом конце: вилкой в глаз или в жопу раз? И оценивать креативность процесса поиска правильного ответа... Будем перенимать международный опыт с адаптацией под наши условия, так сказать

Бывший глава Google затруднился ответить на один из традиционных вопросов компании на собеседованиях
0
Александр Васильев

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

«Никому не выгодно, чтобы у вас скапливались деньги»
0
Artem Zinnatullin
Juno

Не собираюсь оправдывать ролик сбера, но если вы про вот это видео с футболистом youtu.be/VGEfNcvntno, то оно ничем не лучше, тк там блин оператор(ы) по полю бегают, сверху съемка ведется и рядом с полем люди явно не на телефон снимают. Всем участникам было понятно, что это какой-то прикол. Была бы скрытая съемка — без вопросов.

Так можно и в сбере снять реального инвалида, но с кучей операторов, камер и режиссером рядом, понятное дело, его будут обслуживать максимально хорошо.

Видео: Герман Греф в «костюме инвалида» в отделении «Сбербанка»
0
Artem Zinnatullin
Juno

Я может не понимаю, но в чем большая разница между "в имитирующем инвалида костюме" и "под видом инвалида"?

Не вижу "небо и земля" на скриншоте. У всех одинаково желтушные заголовки.

Видео: Герман Греф в «костюме инвалида» в отделении «Сбербанка»
0
Показать еще