#дизайн интерфейсов

4 постов
пост №1987Продукты и дизайн

В 1987 году Apple опубликовала свои знаменитые Human Interface Guidelines, где объяснила программистам, как делать хорошие, предсказуемые интерфейсы программ под Macintosh.

Вот каноническое издание 1992 года: цветной PDF с теорией и практикой.

К сожалению, с каждым годом, сам Apple всё дальше отходит от этих принципов.

Последний macOS Tahoe — самый злостный нарушитель правил. Вот отличная статья Никиты Прокопова (tonsky), где он разбирает отвратительные иконки системного меню. Они буквально взяли и реализовали пример из книжки, как делать нельзя.

Правда, что 99% людей не замечают такие детали как число и качество иконок. Пускай люди не могут объяснить, что не так, но небрежность и непрофессионализм чувствуются.

Помните знаменитый рассказ Стива Джобса о своем приемном отце, который был мастером на все руки и когда они строили забор, объяснил сыну, что задняя стенка должна быть такой же ровной, как и передняя, чтобы спать спокойно ночью? Apple сегодня оставляет заусенцы прямо на рабочей поверхности.

Варвары захватили римский храм, развесили на стенах шкуры (местами очень красивые) и разожгли на полу костер.

А вот железо у них внутри всё ещё безумно красивое, как и раньше.

Инструкция из HIG

Испортили: macOS Sequoia → Tahoe

А вот справа Никита почистил визуальный шум

пост №1459Продукты и дизайн

Кстати, вот инструкция Apple о том, как делать компьютерные интерфейсы для людей. Прям буквально, начиная от общего поведения приложения и заканчивая оптимальным размером отдельных кнопок: Apple Human Interface Guidelines.

Аналогичные гайдлайны от Microsoft для Windows-программ и от Google — про Android.

Увлекательное чтиво, даже если ты не дизайнер.

пост №934Продукты и дизайн

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

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

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

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

​​А вот источник этого дизайна.

Скорее всего, дизайнер не знал, что у его банка нет красивых имен мерчантов (продавцов) карточных покупок в текущей структуре данных. И не нашлось человека, который бы ему на это указал.

пост №930ИИ и машинное обучение

Запустили в продакшн нейросети и переделали интерфейс сайта. У нас было 7 разных шаблонов страниц, осталось 2. Слева панелька навигации (прям как в Apple News), справа список игр в широком или узком виде (лента или плитка).

Тап по кнопке «⚡️ More like this» рядом с названием игры показывает результат работы нейросети — игры, похожие по содержанию. Мы давно пытались решить эту задачу — показать похожие игры, перепробовали 4 радикально разных подхода и вот этот — с нейросетями, оказался лучше всех. Хайп!

Про то, как оно устроено под капотом расскажем потом отдельно, надеюсь. Вот мы на Product Hunt.

В ролях: продакт 🤔 Алексей Горностаев, дизайн 🖌 Андрей Кулагин, фронтенд 🖼 Роман Ахмадуллин и Ольга Котова, бэкенд ⚙️ Антон Шурашов и Евгений Уваров. Ура!