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

интерфейсы

Запустить функцию когда она нужна

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

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

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

1 апреля   дизайн   интерфейсы   ютуб

Лайки и дизлайки лучше звездочек

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

— Хм, поставить две звезды или четыре? Вроде суп был вкусный, но та бабка на меня так злобно посмотрела...

И никто не будет говорить:

— Ставь пять звезд, если понравился ролик. Четыре звезды, если не понравилась музыка. Три звезды, если не нравится моя прическа...

Лайки и дизлайки — для оценки. Для всего остального есть слова. За свои десять лет в интернете я почти никогда не воспринимал всерьез оценки звездочками. Представьте насколько смешно еще более молодым людям? В их голове уже давно сложилась логика абсолютного максимума и минимума. Звездочки перестали работать так, как работали ранее. Скорее всего человек забьет хер на оценку, или тыкнет в первую попавшуюся звезду. И уж тем более он не будет думать над тем, что четыре звезды, это как пять, только «★★★★ и больше». Какой бред.

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

Звездочки более не актуальны.

2018   интерфейсы

Интерфейс должен помнить все настройки

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

Положил в папку пачку писем и создал правило — интерфейс должен это запомнить и ни в коем случае не изменять. Обозначил, что альбом «In Rainbows» мой любимый, значит он мой любимый — не важно слушаю я его или нет. Если я решил убрать галку с чекбокса, значит она должна быть убрана и завтра, и через год. Разработчик интерфейса не имеет права менять способ настройки функций или лишать пользователя возможности все перенастроить. Ситуации, в которой я не могу найти ранее заданных мною настроек, быть не должно.

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

Интерфейс должен помнить все.

2018   бесит   интерфейсы

Плохой интерфейс калькулятора Яндекса

У Яндекса и Гугла есть свои калькуляторы. Я к ним настолько привык, что к своему стыду перестал считать даже смешные выражения в голове. Всегда иду в поиск:

Интерфейс калькулятора Яндекса Интерфейс калькулятора Google

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

У Яндекса интерфейс полностью взят с Эпловского Айоса:

Интерфейс калькулятора Яндекса

Интерфейс Яндекса неудобен по ряду причин:

  1. Ноль почему-то занимает в два раза больше места, чем любая другая цифра.
  2. Знаки деления, умножения, и квадрата странно обозначаются: 5*5/2^2
  3. Знак равенства намного важнее нуля, но почему-то никак не выделен.
  4. За скобки отвечает одна кнопка.
    Я уверен в том, что кнопка частенько не справляется со своей задачей.
  5. Юикс проблемы с кнопкой очищения поля.

Ноль и политра

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

Интерфейс калькулятора Google

Посмотрите на цветовую палитру гугловского калькулятора. Белый цвет — цифры. Серый — математические знаки. Синий — результат цифр и знаков. В гугле есть логика.
Яндекс просто взял чужой дизайн и чуть-чуть изуродовал — пройдемся по каждому уродскому месту.

Странные знаки

В Яндексе компьютерные знаки. Умножение обозначается не крестиком, а звездочкой:

Интерфейс калькулятора Яндекса

Спойлер в верхней строчке показывает, что можно сделать нормально. Почему не делают нормально?

В гугле знак умножения выглядит привычно:

Интерфейс калькулятора Google

Тоже самое с делением:

Интерфейс калькулятора Яндекса

У гугла все ок:

Интерфейс калькулятора Google

И со степенями. У Яндекса хер пойми как:

Интерфейс калькулятора Яндекса

У гугла все хорошо:

Интерфейс калькулятора Google

Иногда нам приходиться использовать вложенность скобок. В гугле это делается просто:

Интерфейс калькулятора Google

А в Яндексе у нас ничего не выйдет. Дело в том, что Яндекс решил сделать одну кнопку скобок на все случаи жизни, а про вложенность совсем не подумал:

Интерфейс калькулятора Яндекса

Зато у них кнопка для нуля большая!

Удаление

В калькуляторах есть два способа очистить поле:
АС/С — очистить все/убрать из памяти.
СЕ — удалить последний символ.

Я считаю, что в калькуляторе должны быть обе функции удаления, но не в одной кнопке, не в двух, и уж тем более не в трех, как у Винды:

В одной кнопке — слишком сложно. В двух — непонятно. В трех — даже не смешно, Билл.
Функция удаления есть в любом устройстве — ее можно использовать. Например, в Айфоне реализовано очень хорошо — кнопка AC очищает полностью поле, а свайп пальцем вправо убирает последний символ:

Интерфейс калькулятора в Айфоне
Интерфейс калькулятора в Айфоне

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

Глупые ошибки

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

Интерфейс калькулятора Google

Это хорошо. Смысл оставлять даже возможность вызвать невозможную функцию?

А вот у Яндекса плохо:

Интерфейс калькулятора Яндекса

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

Результат

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

Интерфейс калькулятора Яндекса

У гугла все очень странно работает:

Интерфейс калькулятора Google

Я думаю, что спойлер — очень полезная вещь. Зачем пользователю лишний раз нажимать на кнопку, если он может увидеть результат, не отходя от кассы? Особенно это полезно при быстрой работе с цифрами. Однако, я не понимаю зачем дублировать выражение. Достаточно показать ответ, выражение и так уже есть в строке.

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

Еще про Яндекс:
Плохой логотип Яндекса
Хороший логотип Яндекса
Две ссылки в одном логотипе

2017   гугл   интерфейсы   обзор   яндекс

Главная ссылка на главной странице

Блог Вениамина Векка
вспоминайте эту вырвиглазную картинку

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

Никаких «главных» ссылок
Никаких ссылок на себя самого

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

Не должно быть никаких «главных» на главной странице сайта:

Блог Вениамина Векка Блог Вениамина Векка

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

Внутренняя страница:

Блог Вениамина Векка

Главная:

Блог Вениамина Векка

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

2017   бесит   дизайн   интерфейсы

Оставьте скроллинг сайта в покое!

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

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

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

Не усложняйте

Примеры плохого скроллинга на сайтах топовых студий России:

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

Не удаляйте, будет хуже

У Аик просто плохой сайт:

Медленные и «интересненькие» слайдеры должны были умереть с 2012 годом. Так бесконечно долго ждать загрузки невозможно. У слайдера на главной очень много лишней анимации. Скроллинг вообще отсутствует. Так можно, но не в случае с Аик.

Покажите хоть что-нибудь

Вот пример очень плохого скроллинга на рандомном сайте:

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

UPD 08.12
Оказывается, это спецпроект Авито, который стал интересен редактором как плохой «сторителлинг». Что-ж, из-за плохого скроллинга я даже не заметил, что это история какой-то там камеры. Делайте нормальный функционал, чтобы людям было не только интересно, но и удобно читать.

Пример хорошего скроллинга, но сомнительной навигации:

Ребята из ХангриБойс спрятали скроллинг, но сделали функционал интуитивно отзывчивым. Это очень хорошо и так можно. Но зря они спрятали логотип, я даже не понял как вернуться назад не скроллируя вверх страницу. Оставляйте логотип на виду.

Вот пример того, как можно сделать скроллинг, и вообще серфинг по сайту интересным:

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

Скроллинг не должен обращать на себя внимание

Если скроллинг обращает на себя внимание и заставляет задуматься над тем, как правильно скроллить — скролллинг плохой или недоделанный. Пользователь не должен задумываться над тем, как скроллить содержимое страницы. У нас в интернетах и так полным-полно проблем с интерфейсами, давайте оставим в покое стандартную функцию любого браузера?

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

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

  1. Зачем?
  2. Какую задачу будет решать?
  3. Не хотите ли вы просто показать, какой вы классный?

Если адекватных ответов в пользу нового и модного скролла нет — не трогайте его.

2017   дизайн   интерфейсы   обзор

Две ссылки в одном логотипе

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

Посмотрите внимательно на логотип Яндекс.Музыки. Разрывать Яндекс и Музыку такая же тупость, как если бы в ЭплПэй разрывали Эпл и Пэй. Это же единый сервис.

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

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

Не стесняйтесь.

Две ссылки в одном логотипе — идиотизм. Не делайте так никогда и смотрите все посты про Яндекс.

2017   дизайн   интерфейсы   яндекс

Обработка опечаток поисковиками

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

Яндекс
Яндекс нарушает все мыслимые шаблоны. Он предлагает опечатку под видом готового исправления

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

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

Распишу:

  1. Вводите запрос;
  2. Поисковик видит ошибку;
  3. Исправляет в строке;
  4. Сообщает об ошибке, выделив неправильный вариант ссылкой;
  5. Вы моментально нажимаете на ссылку;
  6. Оказываетесь на странице с неправильной выдачей;
  7. Беситесь.

Гугл
У Гугла ситуация похожая. Гугл не исправляет запрос, но показывает результаты по исправленному слову.

Вениамин Векк
Почему поисковик ищет по запросу, который даже не в строке?

С одной стороны: Гугл предлагает правильный вариант, с другой: вы видите неправильный запрос в поисковой строке. Секунда-две вы точно тупите, а потом нажимаете на «Искать вместо этого [...]» и срываетесь.

Мой вариант
Предлагаю обоим поисковикам объединиться, и использовать единую систему автозамены.

Дизайн

Во-первых, пользователи меньше будут ошибаться.
Во-вторых, перестанут ругать себя за опечатки.
В-третьих, у Гугла «так», у Яндекса «сяк» — невозможно запомнить.

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

Еще идеи:

  1. можно выделить слово с опечаткой (волнистое подчеркивание).
  2. Не исправлять, а предложить исправление и т. д.

Что думаете? Ваши варианты? Предлагайте ваши варианты в комментах — добавлю в пост.

2017   дизайн   интерфейсы   косяки
Ранее Ctrl + ↓