Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 81
Довольно верная статья и на 100% относится к дизайну хабра.
Ну на хабре вроде как всё довольно интуитивно понятно
Особенно замо'к внизу левого сайд бара, который почему-то обозначает Login/SignUp…
И спрятанный со страницы поиск… Долго искал его в привычных местах: сверху или справа сверху…
И квадрат с крестом посередине, который почему-то обозначает мой профиль…
О да, все мы с детства знаем иконки колокол и три горизонтальные линии… С колоколом у меня до сих пор нет ассоциаций (твой час пробил?), а три горизонтальные линии — как можно было взять с мобильных??? Почему не взяли кнопки с микроволновки или радио? Что ожидать от этой кнопки ума не приложу заранее. Контекстное меню к чему?? И методом научного тыка я нашел «поиск»… жаль что только на пк. На телефоне до сих пор не могу найти поиск в мобильной версии. Наверно я один такой.
О да, все мы с детства знаем иконки колокол и три горизонтальные линии…Скоро будем. Как с иконкой дискеты.
Кстати, насчёт колокола. У меня ушла, наверное, неделя на то, чтобы догадаться, что арка обозначает уведомления, потому что это на самом деле колокол.
Кто-нибудь нашёл как писать комментарии в мобильной версии хабра?
А что не так с колоколом? Я с детства знаю: колокол, набат, пожарный колокол, рында — оповещения о каких-то событиях. Нотификации, по-забугорному.
Я вообще сначала подумал, что это тоннель, а не колокол.
После нововведений большинство моих стандартных действий вместо 1-2 клика требуют 2-3, причем с ошибками в процессе. Я при этом хожу на сайт каждый день, если бы дело было в привычке, уже бы привык.
А чего тут сложного? Пощёлкал по контекстным меню слева, поискал что тебе надо… В процессе случайно нажал на карандаш, тебя редиректнуло на страницу создания нового поста… Неравно жмёшь «back», тихонько матюгаешься, и снова ищешь, что искал…
Знаю. Я в этой статье даже уже успел отписаться =)
Это так. Я простым юзер-скриптом заменил target на верхней иконке «H», которая вела на главную, чтобы вела на Трекер→Посты. Привык туда попадать одним кликом. А «главная» мне вообще не нужна, потому что лента в RSS.
Особенно карандаш на Хабре, который наклонён слева-направо «для левшей», а не справа-налево как пишут «правши».
P.S. Левши извините.
P.S. Левши извините.
P.S. Левши извините.
Вы видели как пишут левой слева на право? Карандаш тоже наклонен справа на лево, чтобы видеть, что пишешь, только кисть огибает надпись и ручку сверху.
Левой рукой вообще удобнее писать справа на лево и развернуть шрифт в зеркальном отображении. Леонардо, скорее всего, поэтому так и писал.
… если я скажу слово «стул», то один представит себе кухонный стул, а другой…
Но мы сойдемся во мнении, что оба понятия будут относительно недалеки от текущего редизайна Хабра.
Но мы сойдемся во мнении, что оба понятия будут относительно недалеки от текущего редизайна Хабра.
+ 1, в последнее время особенно часто встречаюсь с тем, что не понимаю назначение иконки без пояснения! (В основном касается мобильных девайсов, где нет тултипов)
Теоретически, по длинному тапу на иконку должно выводиться ее название (аналог подсказки при наведении мыши в винде). Так рекомендует гугль:
developer.android.com/design/patterns/actionbar.html
К сожалению, даже в гугловских приложениях это работает далеко не всегда.
developer.android.com/design/patterns/actionbar.html
Long-press on an icon to view the action's name.
К сожалению, даже в гугловских приложениях это работает далеко не всегда.
На винфоне, кстати, в приложениях можно раскрыть описание к иконкам в нижнем меню. Очень удобно
Согласен! Помню как-то купил приложение для оффлайн чтения цитат из разных источников, помему Smiler, так как планировал долго быть оффлайн, скачал тысячи циатат перед поездкой, а сверху было три непонятных иконки среди которых была иконка похожая на глаз. Нажал на этот глаз и программа пометила все цитаты как прочитанные и удалила их. Вернуть их никак не получилось, приложение просто не может качать то, что уже было прочитано :(
Не полностью согласен с автором статьи. Замечания:
> 2. Иконки нередко требуют дополнительных ресурсов в технологическом процессе. За рядом исключением, типа Font Awesome
Не более чем переводы. Слабый аргумент.
> 3. Замена иконок занимает гораздо большее время, чем замена текстовых надписей.
Это смотря на чем написано приложение.
>4. Иконки могут создать проблемы с правообладателями, ибо являются объектом авторского права.
Это относится и к тексту.
Для следующих случаев иконки предпочтительнее:
1. Общепринятые иконки (back, home, save, etc)
2. Инонки как акселераторы меню, при наличии тултипов. (Время распознавания и поиска на много быстрее чем при тексте).
3. Для АРМ.
4. Для настраиваемых пользователем панелей.
5. При ограниченном размере области вывода.
> 2. Иконки нередко требуют дополнительных ресурсов в технологическом процессе. За рядом исключением, типа Font Awesome
Не более чем переводы. Слабый аргумент.
> 3. Замена иконок занимает гораздо большее время, чем замена текстовых надписей.
Это смотря на чем написано приложение.
>4. Иконки могут создать проблемы с правообладателями, ибо являются объектом авторского права.
Это относится и к тексту.
Для следующих случаев иконки предпочтительнее:
1. Общепринятые иконки (back, home, save, etc)
2. Инонки как акселераторы меню, при наличии тултипов. (Время распознавания и поиска на много быстрее чем при тексте).
3. Для АРМ.
4. Для настраиваемых пользователем панелей.
5. При ограниченном размере области вывода.
На устройствах с сенсорным управлением — нет тултипов.
Чуть выше я написал — они есть (гугль рекомендует), но их мало кто делает и мало кто знает, как их увидеть.
А как же браузерные приложения (сайты). Разве на них можно реализовать тултипы по долгому нажатию?
Наверное, можно что-то придумать, но тут уже нужна поддержка со стороны браузера. Скажем, по длинному тапу показывать alt.
longTapTime = 700;
jQuery( ".someSelector" )
.on( "vmousedown", function() {
var $this = $(this);
someNamespace.longTap = setTimeout(function(){ callTooltip($this) },longTapTime);
})
.on("vmouseup",function(){
clearTimeout(someNamespace.longTap);
});
Что касается редизайна того же Хабра, тут все не так однозначно. Хабр — такой ресурс, у которого аудитория состоит из людей, зашедших из гугла, которым нужно лишь прочитать пост и закрыть вкладку, и постоянной аудитории.
Первым функциональность, прячущаяся за иконками, не нужна вообще. К тому же иконок для них всего две.
Для постоянных посетителей имеется набор из пяти иконок, на которые достаточно по одному разу кликнуть, чтобы представлять, что за ними скрывается. И для привыкания всем, полагаю, потребовалось не больше пары дней. Карандаш и шестеренка — вполне очевидные штуки. Что можно искать за своим юзерпиком — тоже более или менее просто догадаться. Остается две кнопки, на которых я даже не вспомню, что изображено, пока не посмотрю. При всем при этом после тех пары дней, необходимых для привыкания, пользоваться интерфейсов становится вполне удобно. И даже, пожалуй, удобнее, чем раньше. Эдакое мгновенное неудобство, являющееся удобством в долгосрочной перспективе. Явление многим здесь знакомое (запоминать хоткеи или изучать vim тоже сначала не совсем комфортно).
Первым функциональность, прячущаяся за иконками, не нужна вообще. К тому же иконок для них всего две.
Для постоянных посетителей имеется набор из пяти иконок, на которые достаточно по одному разу кликнуть, чтобы представлять, что за ними скрывается. И для привыкания всем, полагаю, потребовалось не больше пары дней. Карандаш и шестеренка — вполне очевидные штуки. Что можно искать за своим юзерпиком — тоже более или менее просто догадаться. Остается две кнопки, на которых я даже не вспомню, что изображено, пока не посмотрю. При всем при этом после тех пары дней, необходимых для привыкания, пользоваться интерфейсов становится вполне удобно. И даже, пожалуй, удобнее, чем раньше. Эдакое мгновенное неудобство, являющееся удобством в долгосрочной перспективе. Явление многим здесь знакомое (запоминать хоткеи или изучать vim тоже сначала не совсем комфортно).
Вроде как уже постоянный посетитель, но до сих пор периодически теряюсь что за какой иконкой скрывается. И пользоваться стало неудобнее! Сравниваю достаточно долгое знакомство со старым и новым интерфейсом хабра. И как уже писал ранее- это не более чем дань моде, но никак не дань удобству пользователей.
Неа, пары дней мало, всё еще не привык. И это всё ничуть не удобнее, чем раньше.
Vim и хоткеи вполне нормально учатся и запоминаются, потому что с ними в итоге удобнее потом что-то делать.
Если уж проводить аналогии, то это скорее попытка привыкнуть к обуви на пару размеров меньше.
Vim и хоткеи вполне нормально учатся и запоминаются, потому что с ними в итоге удобнее потом что-то делать.
Если уж проводить аналогии, то это скорее попытка привыкнуть к обуви на пару размеров меньше.
Я считаю, что многое зависит от аудитории. К примеры старые полуслепые пенсионеры не будут сильно рады иконкам, прогрессивное человечество будет радо, а консерваторы поворчат пару деньков и привыкнут.
Иконки на хабре меня до сих пор немного путают (и радуют одновременно), я думаю не был бы лишним минитултип на ховере.
Вот еще одно интересное решение, которое удовлетворило бы одновременно и любителей иконок и сторонников текста.
Про ролик. Возможно Вы будете удивлены, но вот первоисточник на видео эксперты.
Иконки на хабре меня до сих пор немного путают (и радуют одновременно), я думаю не был бы лишним минитултип на ховере.
Вот еще одно интересное решение, которое удовлетворило бы одновременно и любителей иконок и сторонников текста.
Про ролик. Возможно Вы будете удивлены, но вот первоисточник на видео эксперты.
А такую купили бы?
Про то что это некрасиво я молчу. Помимо того что не факт, что одно слово объяснит суть режима, так еще нужно придется переводить на каждый язык, что повлияет на конечную стоимость продукта.
Я бы предпочел провести 5-10 минут за чтением инструкции.
Про то что это некрасиво я молчу. Помимо того что не факт, что одно слово объяснит суть режима, так еще нужно придется переводить на каждый язык, что повлияет на конечную стоимость продукта.
Я бы предпочел провести 5-10 минут за чтением инструкции.
Со словами стало намного круче.
И не надо спихивать проблемы интерфейса для производителя (перевод) на пользователей.
Загорелась бы задница у маркетолога — к этим словам добавили бы иконки, и все были бы счастливы.
И не надо спихивать проблемы интерфейса для производителя (перевод) на пользователей.
Загорелась бы задница у маркетолога — к этим словам добавили бы иконки, и все были бы счастливы.
Блин.
Это охрененно. Очевидно, тут понятно, а наверху — херота какая-то.
Недавно опять мучился со стиралкой. Выучил пару иконок, остальные не знаю.
А так — умножьте 5-10 иконок на количество предметов, используемых в обиходе. Станет понятна проблема.
Человек, если что, иконки помнит плохо. Может, японцы или китайцы их хорошо запоминают — образная память, иероглифы, вот это все.
Конкретно по себе и по многочисленным знакомым и родным — скрипач не нужен. Либо надписи, либо иконки + надписи.
Это охрененно. Очевидно, тут понятно, а наверху — херота какая-то.
Недавно опять мучился со стиралкой. Выучил пару иконок, остальные не знаю.
А так — умножьте 5-10 иконок на количество предметов, используемых в обиходе. Станет понятна проблема.
Человек, если что, иконки помнит плохо. Может, японцы или китайцы их хорошо запоминают — образная память, иероглифы, вот это все.
Конкретно по себе и по многочисленным знакомым и родным — скрипач не нужен. Либо надписи, либо иконки + надписи.
Похожий пример со стиральными машинами: если на лицевой панели изображения функций не продублированы текстом — приходится заглядывать в мануал.
У меня у родителей на стиральной машине почему-то случилось наоборот — вместо иконок (как на «международной» версии) у них надписи на немецком. Иконки хоть угадать можно как-то, а стиральные термины на немецком — только с инструкцией в руках.
У меня на стиралке Indesit текстовые названия режимов. Но толку-то…
«Деликатные ткани» в моём представлении должна бултыхать аккуратнее, на меньших оборотах, но дольше, чтобы хоть как-то отстирать.
«Интенсивная» вроде бы должна бултыхать сильнее, но, возможно, меньше по времени.
По факту же по времени наоборот получается.
«Деликатные ткани» в моём представлении должна бултыхать аккуратнее, на меньших оборотах, но дольше, чтобы хоть как-то отстирать.
«Интенсивная» вроде бы должна бултыхать сильнее, но, возможно, меньше по времени.
По факту же по времени наоборот получается.
С удовольствием купил бы. Круто же. А «красиво/некрасиво» — вопрос очень субъективный. Мне нравится второй вариант. Для меня — красиво.
Странные вы! Все же очевидно: тазик с водой, улыбающаяся утка, сброс бомб, баркас, двухмачтовый кораблик, перевернутая шляпка болта, тазик под батареей. Что тут непонятного-то?
Кстати, за дизайн Google, Youtube, Facebook пора расстреливать.
Крайне редко открываю Facebook. Каждый раз, когда всё же это делаю, искренне недоумеваю, как люди этим пользуются; что-то внутри сразу сжимается, кричит и просится наружу.
Позволю себе минитеорию. Иконки — это своего рода иероглифы 21ого века, некий мини язык, который нужно сперва выучить.
Ну, было бы неплохо иметь какой нибудь ГОСТ & ISO.
Типа как glyphicons, только вообще на всё.
Ну, или в unicode всё-всё-всё впихнуть, включая утюги, уточек, шапочки.
Типа как glyphicons, только вообще на всё.
Ну, или в unicode всё-всё-всё впихнуть, включая утюги, уточек, шапочки.
ГОСТ — это плохо. Не потому что мне не нравиться стандартизация, а потому что они придумали как на вариться на этой стандартизации. Вот скажите как я узнаю что по госту правильно а что нет? Скачивание ГОСТов и СНИПов является нарушением интеллектуальной собственности — т.е. не законно. И что нам придёться платить деньги чтобы узнать что значит конкретная иконка?
Короче ГОСТ это плохо.
Короче ГОСТ это плохо.
Дак нет языка то! Часто используются не те иконки и не для того. Это пока не язык, это 100500 локальных жаргонов.
Представьте, что заместо иконок в браузере будут слова, стали бы Вы пользоваться подобный продуктом?
А с тем что не всегда и не везде используются подходящие иконки я полностью согласен.
А с тем что не всегда и не везде используются подходящие иконки я полностью согласен.
А теперь перейдите из Windows в Mac OS X, где вместо иконок справа есть 3 кружка слева. Не иконки даже, разноцветных кружка. Уверенно скажите, какой из кружков что означает?
Я ведь говорю о том, что языка — нет. Есть локальные жаргоны. Есть конечно однозначные, но даже их умудряются использовать не в тему. И часто текст — удобнее, как пример:
Я ведь говорю о том, что языка — нет. Есть локальные жаргоны. Есть конечно однозначные, но даже их умудряются использовать не в тему. И часто текст — удобнее, как пример:
Все зависит от случая. Главное преимущество иконок в том, что человеческий мозг на 60% быстрее обрабатывает визуальные образы, чем текст. Недостаток в том, что далеко не всегда они интуитивно понятны и берет какое-то время выучить их значения.
Преимущество текста в том, что понятно с первого раза, но если этот текст является часто используемой частью интерфейса и находится по соседству с другими текстовыми элементами, то время требующееся для того, чтобы найти нужный пункт — увеличивается.
Идеальное сочетание — это текст + иконка, но это не всегда возможно.
Я обеими руками за то что был какой-то единый стандарт для всех иконок для всех стран мира, чтобы все иконки были доступны в качестве SVG шрифта и одним легким движением мыши подключались к документу. А лучше даже, чтобы изначально были встроены в качестве системного шрифта во все операционные системы.
Проблема определена, решение найдено, задача поставлена, можно открывать проект на гитхабе :)
Преимущество текста в том, что понятно с первого раза, но если этот текст является часто используемой частью интерфейса и находится по соседству с другими текстовыми элементами, то время требующееся для того, чтобы найти нужный пункт — увеличивается.
Идеальное сочетание — это текст + иконка, но это не всегда возможно.
Я обеими руками за то что был какой-то единый стандарт для всех иконок для всех стран мира, чтобы все иконки были доступны в качестве SVG шрифта и одним легким движением мыши подключались к документу. А лучше даже, чтобы изначально были встроены в качестве системного шрифта во все операционные системы.
Проблема определена, решение найдено, задача поставлена, можно открывать проект на гитхабе :)
3 разноцветных кружка, говорите? Я вот вижу красный и два желтых. Мы, дальтоники, очень любим дизайнеров, которые единственным различием элементов интерфейса делают цвет.
Вы еще Однокласники не видели видимо :)
Обратная ситуация ничем не лучше — Microsoft пытается делать неконтрастные интерфейсы с одними надписями, так что каждый раз приходится перечитывать всю страницу для нахождения нужной кнопки.
Особенно бросается в глаза деградация Outlook Web Access.
Особенно бросается в глаза деградация Outlook Web Access.
В чем-то иконки гораздо удобнее. Не так давно на себе это понял, когда пытался проникнуться лаунчером Aviate. Его текстовое меню приложений по алфавиту сильно смешало карты. Я обнаружил, что даже не помню большинство названий, но отлично помню как выглядит иконка (цвет, форма) и привычно ищу ее в списке. Эта же проблема и в списке приложений Windows Phone. Мелкие иконки одинаковой формы, которые не дают взгляду за них зацепиться. Каждый раз приходится внимательно скроллить длинный список в поиске нужного приложения.
Кто может сходу угадать что делают 2, 3, 4 иконки снизу?
Скрытый текст
Чего гадать, просто нажать на них и проверить. Тут метод тыка работает в прямом смысл этого слова =)
А вам не страшно что может среди них быть нечто аналогичное Shift+Del
Нет, не страшно, они же не совсем дураки. А не страшно было, первый раз смартфон запускать? Там большая часть интерфейса построена на иконках без подписей.
Я не спорю что представленный на скриншоте пользовательский интерфейс не слишком хорош в плане UX, я бы оставил только значок «написать письмо» и «удалить». Все остальное вынес бы в текстовом меню за тремя точками, в андроиде впрочем так и сделано.
Я не спорю что представленный на скриншоте пользовательский интерфейс не слишком хорош в плане UX, я бы оставил только значок «написать письмо» и «удалить». Все остальное вынес бы в текстовом меню за тремя точками, в андроиде впрочем так и сделано.
Вот так выглядит интефрейс Gmail на последнем андроиде:
Я вот не понимаю, почему отказываются от иконок там где они просто необходимы. В начале 2000х, когда я только начал осваивать компьютер, попробовал фотошоп. Там иконок в меню нет, так же как и панели с иконками а-ля «офисный пакет». Потом мне случайно попался на диске от какого-то журнала Paint Shop Pro 9, с тех пор я только им и пользуюсь. Даже купить хотел, но Corel выкупил Jasc software и убрал иконки с менюшек! Стало жутко неудобно. Раньше каждый пункт меню имел свою иконку, которую можно было вытащить на панель в удобном порядке, и сэкономить кучу времени при обратотке изображений. Так до сих пор и юзаю старую «девятку». Мне вот интересно, какая была мотивация у Corel, когда они убирали эти иконки?
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Почему иконки чаще мешают удобству, хотя и выглядят красиво