7 заметок с тегом

приложения

Как улучшить дизайн вашего сайта или приложения ясно-понятно: 61 совет по юзабилити

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

Просто сайт, чтобы была картинка по теме

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

  1. Делайте заголовки заметными: с помощью размера, контрастного цвета, жирности.
  2. Ведите пользователей по визуальной иерархии: должно быть понятно, что на экране самое важное, второстепенное и наименее важное. Добиться этого можно через акценты, размеры, контрастность, порядок, группирование, использования свободного пространства.
  3. Используйте макет с одной колонкой, так сложнее что-то испортить.
  4. Ставьте объекты внахлест, чтобы показать преемственность.
  5. Длинные списки в меню группируйте по значению.
  6. Заголовки размещайте ближе к своим абзацам, а не между своим и другим абзацем.
  7. Выделяйте элементы, которые требует внимания. Например, форма с ошибкой.
  8. Убирайте ненужную информацию с экрана.
  9. Используйте всплывающие окна для подтверждения действия. Затемняйте или отделяйте иначе фон, чтобы такое окно было хорошо видно.
  10. Удалите все рамки в дизайне, если они не сделаны специально, чтобы отделить или выделить объект.
  11. Удалите очевидные инструкции, которые повторяют то, что ясно из контекста.
  12. Элементы, если они есть ниже границы экрана, должны попадать на эту границу, чтобы было видно, что дальше есть что-то еще.
  13. Популярные функции размещайте ближе к пользователю, чтобы он мог быстро до них добраться и не искал.
  14. Используйте предиктивный ввод текст. Это когда в форме пишите «узб...» и вам тут же предлагается использовать «Узбекистан» (например).
  15. Популярный выбор показывайте сразу. Например, если у вас 80% клиентов из Ташкента, то доставку в Ташкент укажите как по умолчанию.
  16. Не забывайте показывать важную информацию на карточке товара. Например: цену или размеры.
  17. Если вид станет слишком сложный, показывайте подобные данные при наведении курсора.
  18. Для выбора из 2-4 элементов используйте переключатели или вкладки вместо выпадающего списка.
  19. Продублируйте популярный выбор в начале выпадающего списка.
  20. Если позволяют ваши технологии, используйте предиктивный ввод текста вместо длинного выпадающего списка.
  21. Наглядно показывайте прогресс и статус текущей процедуры. Вместо «Ждите ответа...» показывайте прогресс-бар и оставшееся время, например.
  22. В сложных схемах детально показывайте текущий статус. Не допускайте сложных схем.
  23. В пошаговых инструкциях также указывайте общее количество шагов, а не только текущий.
  24. Показывайте количество элементов в текущей группе. Например: товары в категории, результаты в поиске, отзывы в рейтинге и т. п.
  25. По возможности используйте адрес почты в качестве логина вместо пользовательского имени (username).
  26. Добавьте клавиатурные сокращения для повторяющихся команд.
  27. Там, где будет удобнее, добавьте возможность перетаскивать элементы вместо другого способа сортировки/добавления.
  28. Предупреждайте о минимальных требованиях. Например, при добавлении фото на сайт или создании пароля.
  29. Не показывайте необязательные элементы в формах. Если они необязательные, зачем их показывать?
  30. В кнопках используйте повелительное наклонение. Например: вместо «поиск» следует писать «найти»; вместо «далее» следует писать «продолжить».
  31. Еще лучше, если в кнопках будут описаны конкретные действия. Например: вместо «Отправить» следует писать «Оформить заказ». Но не переусердствуйте, не стоит использовать фразы вроде «Открыть этот файл» или «Отменить регистрацию нового пользователя», если итак очевидно, о чем речь.
  32. Показывайте, что будет, перед тем как пользователь совершит действие, которое увидит не только он. Например, опубликует фото или статью.
  33. Используйте небольшое знакомство с продуктом для новых пользователей. Покажите, что можно сделать вместо того, чтобы сказать, что пока ничего нет.
  34. Покажите сколько еще времени работает ваш офис, не только время работы.
  35. Недавние события пишите не датой, а недавностью: 30 мин назад, 2 дня назад и т. д.
  36. Не заставляйте пользователей считать. Используйте капчу, которая сама вычисляет ботов.
  37. Показывайте, где в приложении или на сайте пользователь сейчас находится. Выделяйте текущий пункт меню или отмечайте его.
  38. В сложноустроенных сайтах используйте «градусник» навигации. Он покажет структуру и текущее положение пользователя на сайте.
  39. Полезную информацию размещайте в начале заголовка. Например: «Входящие (2) — Почта» вместо «Почта — Входящие (2)».
  40. Выделяйте популярный выбор. Например, в таблице с тарифами.
  41. Выводите сообщения о результате действия после важных событий. Например: письмо отправлено, изменения сохранены.
  42. Выделяйте выбранный пункт в длинных меню. Меню длинным лучше не делать, но если иначе нельзя, выделяйте фоном или цветом тот пункт, на который пользователь навел курсор.
  43. Используйте контрастные цвета. Около 10% населения страдает от некорректного восприятия цвета и похожие оттенки для них сливаются в одинаковые.
  44. Заранее предотвращайте неверные действия. Например, если пользователь хочет загрузить слишком большой файл, сказать об этом нужно до того, как он его загрузит.
  45. Если ждать операции слишком долго (что уже плохо), разбейте задачу на подзадачи и показывайте, что уже прошло и что предстоит обработать. Так ожидание будет не на столько утомительным, как если просто сообщить: осталось 28 мин.
  46. Автоматически запоминайте содержимое всех форм без нажатия кнопок со стороны пользователя. Всегда лучше запомнить и потом удалить, чем вообще не запоминать и потерять информацию из-за инцидента.
  47. Избегайте использование название форм внутри самих форм, если после ввода курсора она исчезнет. Название формы всегда должно присутствовать на экране.
  48. Важные подсказки показывайте перед формой, а не после когда пользователь уже введет данные и продолжит чтение формы ниже. Под формой можно размещать второстепенные подсказки.
  49. Необязательные поля лучше не использовать (п. 29), но если все же решили: отмечайте те поля, которых меньше, а не наоборот. Например: если у вас меньше необязательных полей, то отмечать нужно их; если же меньше обязательных, то отмечать следует обязательные.
  50. Информацию об обязательных полях указывайте в самом начале формы, а не в конце, когда форму пользователь уже заполнит.
  51. Кликабельные и интерактивные элементы должны выглядеть так, чтобы было понятно, что с ними можно делать и как.
  52. По умолчанию используйте красный цвет для критических ошибок, оранжевый цвет для стандартных ошибок и зеленый для успешно совершенных действий.
  53. Различающиеся важные пункты списка ставьте вперед. Например:
    Ташкент — главный офис
    Коканд — региональный офис
    Джизак — региональный офис
    Карши — региональный офис
    вместо
    Главный офис в Ташкенте
    Региональный офис в Коканде
    Региональный офис в Джизаке
    Региональный офис в Карши
  54. Удалите из таблиц рамки, они только мешают. Для группировки данных лучше использовать расстояния. В длинных таблицах фиксируйте первую строку с описанием ячеек, а также добавляйте изменение оттенка фона строки при наведении курсора.
  55. Поддерживайте различные форматы ввода (например для дат).
  56. Помните, что если можно что-то испортить, то вам это сделают. Не допускайте возможности совершить ошибку. Например: если нельзя забронировать какие-то даты, то календарь не должен давать такую возможность вообще — эти даты должны быть некликабельными. Однако, убирать их совсем нельзя, иначе календарь будет выглядеть незагрузившимся.
  57. Критические действия в меню отделяйте или выделяйте (например удаление аккаунта или выход).
  58. Всегда давайте возможность удалить аккаунт из вашего сайта или приложения. Можно удалять не сразу, но предупредить, что удаление началось и через неделю аккаунт (профиль) будет полностью удален. До этого времени пользователь может отменить удаление (мало ли психанул).
  59. В вертикальном меню ставьте ссылку на всю строку, а не только на текст в строке.
  60. Давайте понятные описание ошибок и сразу предлагайте какое-то решение.
  61. Запоминайте предыдущие поисковые запросы пользователя и предлагайте их в предиктивном вводе. Позволяйте их удалить.

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

29 июня   ux   веб-дизайн   приложения

Как ничего не пропустить

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

Хочу рассказать вам про сервис Покет.

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

Вы же не можете все бросить и начать читать статью, потому что у нее заманчивый заголовок? Вам даже не обязательно открывать саму статью — достаточно иметь ссылку на нее. То же самое относится к видео или ПДФ и так далее. Это как улучшенная версия Избранного.

Основной экран приложения

К Покету по функционалу приближается Фидли, но он все-таки собиратель РСС-публикаций в большей степени.

Что происходит

После того, как вы отправите ссылку в облако Покета (см. ниже), вы сможете прочитать ее тогда, когда вам будет удобно. Приложение доступно на всех устройствах. Читать статьи можно как в режиме для чтения, так и с оригинальной версткой сайта. Имеются различные параметры, чтобы максимально комфортно настроить чтение статей.

Режим чтения с собственным дизайном статьи на основе логической верстки сайта

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

Та же статья с настройками чтения

Как добавлять ссылки

Существует много способов:

  1. плагины для браузеров (кнопка в адресной строке или команда в меню);
  2. в Файерфоксе имеется встроенный функционал (идеальный браузер для Покета);
  3. из буфера обмена (зайдя потом в приложение);
  4. отправив ссылку на почту add@getpocket.com;
  5. через кнопку в Фидли;
  6. из Эверноута, Твиттера, Флипборда и 1500 других приложений;
  7. используя встроенный функционал шаринга в мобильных ОС (требуется установка приложения)
  8. используя сервисы вроде IFTTT;
  9. отправив ссылку боту @pockebot в ТГ;
  10. возможно что-то еще, я не все знаю.

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

Список статей на сайте

С Покетом у вас случится две вещи:

  1. Вы станете много читать (продуктивность);
  2. Еще больше станете собирать, чтобы прочитать потом (прокрастинация). Когда-нибудь. Когда будет время прочитать все эти 900 очень интересных статей.

Тегирование

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

С помощью сайта Ридрулер можно прогнать свои статьи и получить теги с временем, которое понадобится для прочтения. Время определяется на основе вашей скорости чтения; советую использовать. А @pocketbot сам пишет примерное время в тегах, но у него менее точные теги вроде 1-5 min, 10-20 min и т. д.

Платная версия

Есть премиум-версия, которая позволяет хайлайтить сколько влезет, сохранять копии всех статей в облаке, использовать полнотекстовый поиск, она убирает рекламные статьи в вашем списке и делает что-то еще неубедительное. Как видите, кроме выделения текстов особых причин бежать платить нет. Тем более, что цена какая-то дикая — 2,5$/месяц (так пишет на сайте, а в приложении почти в 2 раза дороже — не знаю почему).

В путь!

Если вы дочитали до этих строк, то Покет вам точно поможет. Иначе чего ради столько читать? Установите приложение или начните с сайта, адрес один: getpocket.com

Обновление от 10:48. В личку прислали, что владельцы нового Самсунга С-7 могут получить полгода премиум-подписки Покета. Вот и появился смысл купить этот телефон. Скорее всего это работает и на более новых моделях, проверяйте.

30 апреля   лайфхак   обзор   приложения

Интерфейсы старых почтовых клиентов и сервисов

Четырнадцать лет назад я задумал сделать свою онлайн-почту. Тогда еще пользовались Батом, Аутлуком и другими настольными клиентами. Однако, Джи-меил, Яндекс-почта и Меил-ру шли уверенным шагом в веб-будущее. Тогда я насохранял более 200 примеров почтовых интерфейсов различных сайтов и программ для Виндоус, Мак, Линукс и других ОС. Конечно, никакой почты в итоге не вышло, потому что как это всегда бывает: дизайн есть, программиста нет.

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

Интересно, что за столь много лет ничего принципиально не изменилось. Современный пользователь без проблем осилит древний интерфейс.

Скачать 220 скриншотов почтовых интерфейсов (JPG, ZIP, 25 Мб)

2018   веб-дизайн   история   приложения

Главная проблема Клика, Пейми и Лебазара

Вчера (1 марта) переустанавливал ОС на телефоне и вышло так, что стал ставить привычные приложения. Раньше я тоже замечал эту проблему (она старая), но когда я увидел ее на трех приложениях за пять минут, меня охватило сильное удивление.

Все забывают про место, которое клавиатура занимает на экране.

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

И вот я захотел продолжить...

В защиту Пейми скажу, что мне сообщили из штаба о том, что так быть не должно и это ошибка верстки. В защиту Клика скажу, что кнопка «Продолжить» появляется выше клавиатуры (на Андроиде), если выйти из формы «Сумма перевода» и снова нажать в нее — т. е. это какой-то глюк верстки.

В защиту Лебазара сказать ничего не могу, потому что не знаю их дизайнера. Кстати, у них сделано даже еще хуже. Я уже не первый раз попадаюсь на том, что вместо авторизации, пытаюсь зарегистрироваться, потому что приветственный экран приложения ориентирован на регистрацию, а не авторизацию. Вот вам секрет: если вы не находите телефон в своей базе, предлагайте его зарегистрировать. Т. о. буду рады и те, кто смог сразу войти и те, кто впервые это делает.

Вот куда мне было нужно (показано синей стрелкой)

Если тапнуть во фразу «У вас уже есть аккаунт?» (которую можно назвать «Вход» или «Авторизация»), то на кнопке незаметно изменится текст, приглашающий войти. Короче, тот еще лабиринт.

2018   ux   наша марка   приложения

Как улучшить меню приложения «Лё базар» в 4 раза

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

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

Чем черт не шутит! Может разработчики посмотрят на мое предложение и улучшат меню.

Лучше сначала показывать то, что важно и с чем пользователь работает чаще и уже потом все остальное. Иконки у меня неидеальные, но суть понять можно. Важное выделяем, второстепенное затемняем (в данном примере осветляем). Для продуктов я даже стрелку сделал.

Также переименовал некоторые пункты, потому что «Изменить сеть» — это не по-человечески и не несет пользы. Лучше указывать сразу текущий магазин, чтобы я заметил его, когда полезу в Продукты. Так же нет смысла начинать два пункта (тем более, если они рядом) с одного и того же слова. Одинаковые слова следует опускать, поэтому «Мои адреса» превратились в «Адресную книгу» — не так хорошо, как «Мои адреса», но в купе с «Моими заказами» лучше. А «Мои заказы» лучше, чем просто «Заказы» или «История заказов», потому что понятнее и в целом пункт важнее, чем адреса. В жизни не писал столько кавычек в одном предложении.

Жду апдейта.

2017   ux   приложения

Лучшее приложение для учета личных финансов

Я больше месяца просидел на семи приложениях для учета ваших расходов и выяснил на что стоит обратить внимание. Если у вас нет времени, то ставьте (далее все ссылки только на версии для айфонов) «Мани фикс», «Мани флоу» или «Дзен-мани». Если готовы платить, посмотрите «Кэш синк». А далее — грязные подробности.

Как экономить
Хочу сказать, что вы не станете меньше тратить, если у вас будет приложение, которое позволит записывать все расходы. Потому что, если вам что-то нужно, то вы все равно будете это покупать, пока у вас есть деньги. Можно сэкономить, если вы живете один и от вас никто не зависит, но если у вас есть жена, то эти приложения скорее чтобы понимать куда деньги уходят, а не на чем можно экономить.

Мои требования к приложению
Я исхожу из того, что приложение для учета личных финансов должно отвечать следующим требованиям:

  1. Быстро загружаться (за 1-2 сек)
  2. Не тормозить
  3. Добавлять расход свайпом вниз или еще проще
  4. Позволять добавлять несколько счетов и валют и не путать эти счета между собой
  5. Показывать наглядную диаграмму расходов
  6. Не быть уродским, на него каждый день смотреть предстоит

Рейтинг приложений, который я выстроил построен на этих требованиях. Изначально я установил больше приложений. Однако, парочка сильно ограничила бесплатную версию, так что я просто не мог ее нормально оценить. Также, приложение «Копитер» требовало регистрации и при этом перебрасывало в браузер, где в микроскопичской форме нужно было заполнить поля. Я решил, что это слишком и удалил его.

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

1. Мани фикс (бесплатно)
Короче, я о нем не сразу узнал. Ближе к концу тестирования, но я офигел. «Мани фикс» умеет делать все, что нужно.

Плюсы:
— Быстрый запуск и работа
— Добавление расхода/дохода сразу при открытии. Никаких тебе свайпов или — упаси, Господь — кнопок в углу как у Андроидов.
— По умолчанию, вам не нужно выбирать категорию, можно потом сесть и по памяти восстановить. Со временем приложение «обучается» подставлять вам нужную категорию. Скорее всего, смотрит где вы находитесь.
— Самые крутые иконки — это даже иллюстрации. Не то чтобы они были жирным плюсом, но удивительно как серьезно подошли к этому элементу.
— Расход — свайп направо, доход — свайп налево. Никаких тебе калькуляторов как у большинства приложений, где надо понять, что происходит.
— Отчет выводится по переводу в горизонтальный режим. Мне не очень подходит, потому что у меня зафиксировано положение экрана, но уверен, что для многих это плюс.
— Голосовой набор. Пока не тестировал, но по идее должно быть удобно.

Минусы:
— Не показывает все счета сразу. «Коинкипер» их сразу выводит и ты видишь ситуацию в целом все время, а здесь не так.

2. Money flow (платная версия 379 рублей)
Это самое быстрое приложение, которое имеет два вида: светлый и темный. Оно подойдет тем, кому концепция «Мани фикса» не по душе.

Плюсы:
— Быстрый запуск и работа
— Добавление расходов как через свайп, так и по тапу на кнопке
— Несколько счетов и валют
— Хорошие наглядные иконки
— Позволяет сортировать категории

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

3. Кэш синк (платная версия 299 руб)
Почти не уступает предыдущему приложению, но в бесплатной версии позволяет добавить только 10 расходов и дальше нужно его покупать за 300 рублей.

Плюсы:
— Быстрый запуск и работа
— Добавление расходов как через свайп, так и по тапу на кнопке
— Несколько счетов и валют

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

4. Дзен-мани (платная версия 1 490 рублей)
Это приложение скорее лучше, чем предыдущее, но оно немного медленнее и добавлять расходы можно только по тапу (а это надо еще попасть).

Плюсы:
— Достаточно быстрый запуск (4 сек) и работа
— Несколько счетов и валют
— Хороший обзор расходов в круговой диаграмме (вообще она спорная, но лучше пока сложно придумать)
— Хорошие наглядные иконки
— Позволяет добавлять подкатегории

Минусы:
— Добавление расходов только по тапу на кнопке
— Не показывает все счета сразу. Нужно переключаться между счетами
— Валютные счета в балансе показывает в основной валюте по госкурсу
— Как-то хитро пытается подставлять мне категории, которые я часто использую, но на деле приходится ждать секунду, когда он их переставит как хочет, чтобы правильно выбрать нужную категорию. Если она не оказалась среди трех самых популярных, то надо лезть в «море...».

5. Спенди (Spendee, платная версия 1 150 рублей в год)
Одно из самых привлекательных приложений в визуальном плане. Оно очень привлекательное и изобилует анимациями, отчего пользоваться им приятно. Имеется интересный отчет и позволяет вести учет нескольким пользователям.

6. Коинкипер (CoinKeeper, платная версия 1 490 рублей)
В Аппсторе у приложения много положительных отзывов и вообще оно крутое. Однако, на моем Айфоне 5 Эс оно безбожно тормозит. Дизайнеры здесь точно лучше, чем программисты. В отличие от конкурентов, где дизайн основан на списке, здесь используется плиточный подход. Вы добавляете расходы перетаскиванием «монет» в нужную категорию, поэтому если у вас что-то вроде Айфона 7 Эс Плюс, то сначала попробуйте «Коинкипер». Если бы не тормоза, приложение было бы замечательным.

7. Мани про (платная версия 399 рублей)
Ничем особенно не выделяется. Разве что контрастно выделяет сумму и отмечает цветом уже задействованные категории. Не очень понятно зачем так делать, но плюс есть в том, что первое время вы быстрее находите нужную вам категорию.

8. Дебит-н-кредит (платная версия 249 рублей)
Очень простое на вид, текстовое приложение. Непонятно зачем нужно каждый раз переходить в нужный счет, чтобы добавить туда расходы. Если вас бесят иконки, то это приложение для вас.

2017   лайфхак   приложения

Как заблокировать Фейсбук на время

Нашел программу «Селф контрол», которая бесплатно позволяет блокировать нужный вам сайт на заданное время. Добавляете Фейсбук, Инстаграм, Браззерс, Ленту — у кого какие проблемы — и указываете время блокировки. На этот период вы не сможете открыть сайты из Черного списка. Автор пишет, что никак не сможете, но вы типа не переживайте — не конец Света же. Я пользуюсь, чего и вам советую (под Винду).

2016   лайфхак   приложения