Где найти пример идеального UX/UI?

Question

[Максим Тимофеев]

Частично эта информация, конечно, разбросана по интернету и "поюзав" поиск можно найти обрывки. Но, собственно, ищу краткие результаты исследований. Например, "пользователи ищут кнопку обратной связи в правом нижнем углу", "красный цвет привлекает внимание" и т.д. Некий мануал для дизайнера. Так как последнее время начал замечать, что уделяю кучу времени внесению правок в дизайны. Когда все красиво, но совершенно не user frendly.
Может кто наталкивался на хорошие статьи на тему, что бы ссылку дизайнеру кинуть или тыкнуть заказчика мордой в теорию.

Заранее спасибо. material design не предлагать, это отлично, но не совсем то.

Comments

[dummyman]

Если трезво смотреть на суть вопроса, ответа в принципе быть не может.
Модные рюшечки где-то могут быть уместны, где-то неуместны. Нет никаких универсальных UX/UI.
Те рюшечки, которые модны сегодня, завтра будут неактуальны, т.к. Web не стоит на месте. Идеальный вариант непостижим, всегда будет возможность сделать еще лучше.

[Максим Тимофеев]

dummyman: глупости. Есть базовые вещи, которые следуют из психологии человека, такие как f-шаблон, восприятие цветов, и т.д. Alexander Pushkarev дал отличный блог, в котором большая часть вещей базовые принципы, неизменные. А о "рюшечках" речь вообще не шла. Если UI/UX в Вашем понимании, это "рюшечки" - я Вас расстрою, это не так.

[dummyman]

Максим Тимофеев: Ну тогда подскажите мне пример UX который одинакого хорошо подойдет, например, для lenta.ru и openstreetmap.org.

[Максим Тимофеев]

dummyman: Да куча вариантов. Тот же принцип f-шаблона будет действовать для любого сайта. babich.biz/f-shaped-pattern-for-reading-content
И таких примеров миллион, посмотрите ответы, которые дали Alexander Pushkarev и Ivan Bogachev перейдите по ссылкам и почитайте.

[dummyman]

Максим Тимофеев:

Да куча вариантов.

Так назовите хоть один.

f-шаблон

сомневаюсь что он работает на openstreetmap.org

[Максим Тимофеев]

сомневаюсь что он работает на openstreetmap.org

не сомневайтесь, это базовый принцип основанный на особенностях психологии человека. По ссылкам, остальные принципы.
И тут вопрос, используют ли openstreetmap этот принцип? Строят ли они правильно layout? Но то что принцип работает не зависимо от сайта это точно.

[dummyman]

Максим Тимофеев:

это базовый принцип основанный на особенностях психологии человека

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

[Максим Тимофеев]

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

[dummyman]

Максим Тимофеев:
Смотрите, вы мне скинули ссылку на статью

F-Shaped Pattern for Reading Content

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

И много вы знаете людей, которые увидели карту на мониторе первый раз? В моем окружении таких людей нет. Даже ребенок 10 лет картами пользуется на ровне с, например, вконтактом.

[Натали]

dummyman: Не понимаю, зачем вы начинаете разделять понятия контент и интерфейс, ведь контент является частью интерфейса и интерфейс служит для визуального отображения контента на странице.
Если вы не понимаете как применить в проектировании пользовательского интерфейса UX/UI принципы, совсем не значит что они не работают.

[Максим Тимофеев]

dummyman:

А интерфейсом я считаю абсолютно все, что не контент.

Вы можете считать, что киты это рыбы и т.д. Зачем что либо предполагать, когда есть стандартизированное определение.
UI - интерфейс, обеспечивающий передачу информации между пользователем-человеком и программно-аппаратными компонентами компьютерной системы (ISO/IEC/IEEE 24765-2010).
https://ru.wikipedia.org/wiki/Интерфейс_пользователя

Но речь о UI+UX, при чем как о концепции. Мало того, я не собираюсь Вас учить. Я задал вопрос и получил два отличных ответа. Ваши комментарии и Ваш взгляд на вещи, которые не связаны с темой вопроса, меня совершенно не интересуют. Хотите отделять контент от ui - пожалуйста.

[dummyman]

NataliTimofeeva:
Ну вот смотрите,

контент является частью интерфейса

Допустим.

интерфейс служит для визуального отображения контента на странице

Но, вы же не считаете, что интерфейс является частью контента.

То есть, я понимаю что вы мне хотите сказать. HTML един для интерфейса и контента. Но для форматирования контента достаточно возможностей markdown. Задачи по контенту не решают CSS и там теги HEAD или NAV.

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

[dummyman]

NataliTimofeeva:

Если вы не понимаете как применить в проектировании пользовательского интерфейса UX/UI принципы, совсем не значит что они не работают.

Понимаете, первый сайт сделал в 1999г. В те времена у большинства авторов сайтов не было интернета даже, например, в собственном жилище. На тот момент как и мой 80% сайтов не использовали даже CSS. Когда люди мне говорят что UX/UI идеален, универсален и был придуман задолго до нас, всегда был и его принципы навсегда останутся неизменными, у меня волосы дыбом поднимаются.

[Максим Тимофеев]

dummyman: сочувствую. Помню 99-й, я как раз школу закончил. Но мне повезло больше, инет был, но насколько я помню dialUp

[dummyman]

Максим Тимофеев: Ну вот, если вы видете развитие интернета также как его вижу я, что же приводите мне ISO/IEC/IEEE 24765-2010

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

как фундамент сайтостроения.

[Максим Тимофеев]

dummyman: Потому что так оно и есть. При чем тут опыт прошлых лет. Вы вчера живете или сегодня? Вы наверное и адаптацию под мобильную версию не делаете, потому что в 90-х было мало людей с мобилками.

[dummyman]

Максим Тимофеев: Я совсем не про это. если вы считаете ваш сайт

программно-аппаратным компонентом компьютерной системы

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

[Максим Тимофеев]

dummyman: Вы издеваетесь или реально не понимаете о чем речь? Я устал, честно. Я как со стеной общаюсь. При чем тут мой сайт? При чем тут алгоритм его работы? На входе и выходе чего? Мы про ui/ux общаемся. Вы просто случайные фразы из учебника по программированию за 90-й год компонуете в случайные строки?

[dummyman]

Максим Тимофеев: дык вы же пишете

UI - интерфейс, обеспечивающий передачу информации между пользователем-человеком и программно-аппаратными компонентами компьютерной системы (ISO/IEC/IEEE 24765-2010).

Я всего лишь опирался на требования к UI системных компонентов в рамках ISO/IEC/IEEE 24765-2010. Согласитесь, UI сайта - несколько из другой оперы. Зачем тогда вы приводите понятия из этого стандарта?

[Arris]

В идеальном мире? :)

[Николай Чуприк]

Интерфейсы меняются со временем. Если вас усадить (не знаю сколько вам лет, правда) сейчас за Windows 3.1, вы вряд ли сразу поймёте как и что жать. В то же время человек из 1990 года гуру в Windows 3.1 вообще не сможет справиться с навигацией на современном сайте. Это значит, что современный UI плох? Или плоха винда 25 летней давности?

Нет универсального идеального UI вне культурного контекста.

Answer 1

[Ivan Bogachev]

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

В последнее время сам себя тыкаю в замечательную статью - UX/UI Best Practices: 125 Easy Tweaks to Optimize .... Там обо всем простыми словами и с примерами.

Comments

[Максим Тимофеев]

Спасибо

[GTRxShock]

Вот! Вот для чего, все мы тут сегодня собрались! Круто, спасибо за сслыку :)

з.ы. остальные ответы тоже отличные)

Answer 2

[Alexander Pushkarev]

Почитайте блог - babich.biz много полезной информации с примерами

Comments

[Максим Тимофеев]

спасибо

Answer 3

[sim3x]

Лекция про помидорчики
https://events.yandex.ru/lib/talks/546/

Comments

[Максим Тимофеев]

Не смотрел пока, но выглядит интересным. Спасибо.

[sim3x]

Максим Тимофеев: ето вводная лекция

Она хорошо заходит для понимания всей сложности данной области

Answer 4

[Евгений]

Например, goodui.org/.
Есть еще бесплатный урок Психофизиология графических интерфейсов.

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

Собственно проектирование UX/UI это основная работа дизайнера. После утверждения финального дизайна, глобально дизайн не должен меняться.
Клиенту же, к сожалению, что-либо объяснять бесполезно.

Comments

[Максим Тимофеев]

UX/UI это основная работа дизайнера.

Не полностью согласен

После утверждения финального дизайна, глобально дизайн не должен меняться

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

[Евгений]

UX это сейчас основной тренд в веб-дизайне. Может дизайнер просто не хочет спорить с "начальством"?
Есть много руководств, но они могут входить в некое противоречие друг с другом. Часто упоминается "5 уровней UX" Дж. Гаррета.
Вот нашел еще интересные переводы UX Crash Course: User Psychology и UX мифы(перевод uxmyths.com ). Есть книги Smashing Magazine, например, "User Experience Revolution ".

Answer 5

[Олег Леонов]

По мобильному ux посмотрите блог instagram.com/mr_mobister

Comments

[Максим Тимофеев]

инстаграмм? Адский вариант для инфо блога.

[Олег Леонов]

Максим Тимофеев: Какой вариант лучше?

Answer 6

[Sanes]

Дизайн должен в первую очередь продавать. То, что будет хорошо для аудитории IT-шников, совершенно не годится для "Клуба молодых мамочек".

Comments

[Максим Тимофеев]

Вы вопрос читали? На какую часть из него Вы ответили?
Солнце желтое, вода течет. Тут как бы не поспоришь, но это не ответ на вопрос.

[Sanes]

Максим Тимофеев: С чего вы взяли, что существует идеальный UX/UI?

[Максим Тимофеев]

Sanes: его нет, это цель, к которой надо стремиться. Это теоретическая штука, которая не существует на практике, но мне нужны именно теоретические изыскания. И Alexander Pushkarev и Ivan Bogachev четко дали то что нужно.

[Sanes]

Максим Тимофеев: К вы чему стремиться собираетесь? Один и тот же прием для разной аудитории даст противоположные результаты.

[Максим Тимофеев]

Sanes: Нет. Есть базисные вещи, которые действуют одинаково. Например f-шаблон или восприятие цветов. Конечно есть дальтоники, но это не отменяет того, что красный вызывает агрессию, более, чем зеленый.

[Sanes]

Максим Тимофеев: Вы благословения просите на базис, который знаете?

[Максим Тимофеев]

Sanes: ЧТО?

Answer 7

[Pavel Baly]

Посмотрите вот здесь, тоже может пригодиться тут

Comments

[Максим Тимофеев]

битая ссылка

[Pavel Baly]

А сейчас?

[Pavel Baly]

Максим Тимофеев: вроде исправил

[Максим Тимофеев]

Pavel Baly: И что это? Аналог тостера?

[Pavel Baly]

Максим Тимофеев: Ссылка ведёт на страницу, где есть подборка в которой возможно вы найдёте, что-то полезное для себя. Воспользуйтесь гугл-переводчиком быстрее сориентируетесь

[Максим Тимофеев]

Воспользуйтесь гугл-переводчиком быстрее сориентируетесь

Не испытываю проблем с английским

Ссылка ведёт на страницу, где есть подборка

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

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

Answer 8

[xmoonlight]

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

Comments

[Алексей Бурлака]

Результаты поиска над строкой поиска. Серьёзно?

[Максим Тимофеев]

xmoonlight: сомнительное решение

[Максим Тимофеев]

xmoonlight: Честно говоря не понимаю как он относится к вопросу.
Из критики по ui - раздражает различные размеры шрифтов. И меню на мой взгляд проще спрятать на мобиле в одну кнопку (тут статья и пример). То что есть крайне не эстетично. Подбор цветов тоже сомнительный. Вот отличный сервис тыц
По самому поиску, очень странные результаты. Не пойму почему выдает только 1 вариант и например при поиске "ау" выдает "daewoo". А на "re" выдает Great Wall а не скажем Renault

[xmoonlight]

Максим Тимофеев: ок, про меню и шрифты - понятно.
про поиск: great больше похож на re, чем renault, т.к. букв меньше. Но что это упущение - согласен.

[xmoonlight]

Максим Тимофеев: Спасибо! Поправил по поиску... Глянешь, если не сложно: ещё может найдешь баги?
Почему 1 вариант - так проще показать качество и обнаружить ошибки. (как собственно и получилось)

[riot26]

xmoonlight: почему курсор после поиска ставися в начало? Никакой заботой об UX на сайте и не пахнет

[xmoonlight]

riot26: кроме курсора - что ещё не устраивает по UX ?

[riot26]

xmoonlight: сбивает с толку подмена левого меню при клике на "API". Нужно продумать подменю или вкладки.
Демо хочется чтобы работал без перезагрузки страницы. А ещё лучше – на лету при вводе.
Нет подсветки активного пункта меню, но предательски подсвечен второй пункт. Тоже сбивает с толку.

[xmoonlight]

riot26: ок. со всем согласен! Спасибо. Пока упор делаю на функционал...
Обязательно поправлю чуть позже.

[riot26]

xmoonlight: там вообще можно всё впихнуть в одностраничник с каким-то scrollspy и якорями.

[xmoonlight]

riot26: можно, но...
1. плохо индексироваться будет, т.к. тематика страницы будет "размыта".
2. планируется ещё доп. контент: статьи-кейсы по использованию API с описанием и иллюстрациями по применению
3. SEO - вообще не настроено сейчас....

А с одностраничником - лично мне пока совсем непонятно как эти все пункты сделать рабочими....