?

Log in

No account? Create an account
Дмитрий Карпов

> Recent Entries
> Archive
> Friends
> Profile

January 24th, 2013


Previous Entry Share Next Entry
02:45 pm - Дизайн активных элементов
Не перестают удивлять дизайнеры обсуждающие оформление текстовых ссылок в интернет. Профессионально создавать интерактивную модель проекта основываясь на простых, но самых доступных методах. На этапе эскизирования, отдельным этапом решить единообразный прием сигналов пользователю. Просто выведите в системе один цвет, который выполняет роль кода для восприятия, цвет первое что мы воспринимаем, затем уже форму. Цвет это первичный сигнал, изменение курсора только подтверждает верность понимания. Цвет ссылок принципиален. Привычен синий цвет. Двадцать лет этот цвет остается самоочевидным, но не обязательным. Мы же забыли стандарт серого фона страниц по умолчанию. Подчеркивание ссылок не такое принципиальное, оно важно как возможный прием обратной связи, когда цветовой код обозначает возможность действий, а реакция на действие сопровождается, например, подчеркиванием ссылки.

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

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

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

А спорить всегда лучше прототипами.

(13 comments | Leave a comment)

Comments:


(Deleted comment)
[User Picture]
From:desmonych
Date:January 24th, 2013 03:14 pm (UTC)
(Link)
в facebook миллиард пользователей и ни одной подчеркнутой ссылки :) вероятно не так сильно и нужно, хотя конечно зависит от того что и как подчеркивать.
(Deleted comment)
[User Picture]
From:desmonych
Date:January 24th, 2013 04:04 pm (UTC)
(Link)
мне кажется я даже понял почему вас Стас Михайлов добавил :)
[User Picture]
From:Vladislav Timofeyev
Date:January 25th, 2013 07:25 am (UTC)
(Link)
Фейсбук - это кошмар, на который нельзя вообще ориентироваться. Чего стоит только "Подробнее" в описании страницы - наводишь на нее, рамкой выделяется блок, который выше - и страшно - что же дальше произойдет?
[User Picture]
From:rasskazov
Date:January 24th, 2013 12:17 pm (UTC)
(Link)
Подчеркивая, не подчёркивая, лента ссылки даже не удосужилась выделить цветом и выделила цветом детали вовсе не являющиеся ссылками
[User Picture]
From:grosslarnakh
Date:January 25th, 2013 06:26 am (UTC)
(Link)
Привет. Хорошо, что ты это написал. И, конечно же, в реальности атрибутирование может быть не таким тупо однозначным.
Я бы хотел немного подумать эту мысль вслух.

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

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

И вот тут проблема в том, что старая система, хоть и чрезмерно избыточна, но все-таки достаточно четко позволяла идентифицировать интерактивные элементы. Хрен ошибешься.

Новые системы зачастую просто "красивые". И кому-то везет больше, а кому-то меньше с тем, что говорится на новых диалектах. У Ромочки вон в правой колонке написано: "Параметры Марка".

marka

На старом языке это бы однозначно писалось так: "Параметры Марка". И отличалось бы от фразы "Параметры Марка". Сейчас это - двоякая фраза. Параметры Марка - это, например, высота Марка, вес Марка и его возраст, и мы оба знаем как минимум об одном невзрослом еще Марке. Конечно, на сайте между двумя словами пробел конский, и контекст понятен, но нельзя сказать, что это полноценная адекватная замена старому проверенному решению.

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




Edited at 2013-01-25 06:26 am (UTC)
[User Picture]
From:grosslarnakh
Date:January 25th, 2013 06:35 am (UTC)
(Link)
Мне вдруг дизайнеры Ленты предложили поменять старый проверенный язык на новый не всегда клевый - как если бы я привык читать Ленту по-шотландски, а тут вдруг предлагают разбирать текст по-испански. Причем на нововыдуманном испанском, на странном диалекте, сыром и не до конца готовом. Мне тяжело, надо учить новое, и только я выучу глагол в заголовке, как в статье он оказывается наречием. Меня, конечно, колбасит.

Я хочу сказать: "оставьте старую систему идентификации, она работает, или придумайте новую, но пусть она будет непротиворечивой". Но сгоряча кричу: "подчеркните ссылки". И тут ты прав, это глупо и не круто.

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

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

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

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

Edited at 2013-01-25 06:59 am (UTC)
[User Picture]
From:desmonych
Date:January 25th, 2013 11:42 am (UTC)
(Link)
Все так, меня другое волнует, вот двести лет назад люди изучали латынь, и сто лет назад изучали мертвые языки, и сейчас изучают, но их в сотни раз меньше, людей которым нужен, полезен и навязан самый распространенный древний язык. Проблема только в необходимости его применения. Вот знаешь латынь и можешь понимать половину европейских языков. Сотня примеров дебильного применения подчеркиваний у ссылок. Старая л3нта подчеркивала целые предложения, делая из каждого пользователя новичка, который точно не знает куда ему кликать. Меня напрягает, что очевидный прием становится объектом обсуждения, одним кажется модным и современным не подчеркивать интерактивные элементы, другие до одури отстаивают свое право на стандарты, которые им навязали, а они и штампуют его везде. Когда много текстовых ссылок с подчеркиванием, это заметно усложняет восприятие текста, как типографической системы, но хорошо для интерактивного взаимодействия. Помню на старой-старой Л3нте было два цветовых кода для интерактивных элементов. Красный в основном меню, по моему и синий для основных ссылок в материалах. Ссылки не являются в используемой тобой и Ромочкой метафорической системе элементами языка, только разве междометиями, такими эмоционально окрашенными сообщениями. Ссылка это выкрик, улюлюканье, однообразное приглашение с целью привлечь внимание и обозначить единственный возможный алгоритм действия. Слишком много усиленных сигналов (подчеркивание/цвет/изменение размера/шрифта) только усиливают скрытое напряжение. Сейчас никто не спутает вертикальный список по левому краю страницы с навигационным меню, с подчеркиванием ссылок или без, привычный паттерн, привычный навигационный формат. Лента не так плоха, она просто пытается быть молоденькой кокеткой, а мы то ее знаем во все разделы лет десять. Другое дело дизайнеры, холиварят без включения базового анализа, которые ссылки возводят в атрибут принадлежности поколений и актуальности дизайна, более тупого обсуждения не могу себе представить. Можно спокойно не подчеркивать ссылки, если найдется адекватная по однозначности замена сигнала пользователю. Многие интерфейсы живут только на цвете сигналов и этого достаточно. Мне нравится NYT. Мы с тобой абсолютно расходились по поводу дизайна Газеты, мне нравились там выносы текста с отступом набора влево, ты это терпеть не мог, а я считал очень эффективным для беглого знакомства с материалом. Теперь дизайн нас примирил, стало никак. С Л3нтой еще больше. Обнимаю.
[User Picture]
From:isemus
Date:January 25th, 2013 03:42 pm (UTC)
(Link)
Мне в этом смысле очень нравится пример с айпадом. Им пользуются все от годовалых детей до наших дедушек. Им пользуются люди, которые никогда и не пользовались компьютерами и про ссылки ничего не знают. В айпаде ссылки не подчеркиваются и не выделяются синим, но это не мешает им читать новости, почту или смотреть мультики. Мне кажется, что язык уже мутировал, а мы все не можем к этому привыкнуть, как родители, которые с трудом разбирают эти странные слова, с помощью которых вполне успешно общаются их дети.
Так ли это или нет — покажет время.
[User Picture]
From:desmonych
Date:January 25th, 2013 05:57 pm (UTC)
(Link)
искал где тут лайкнуть :) мне вообще кажется, что сам формат расширился, я вот начал голосовым поиском пользоваться на IPad :) фантастика, но визуально конечно лучше сохранять традицию, подчеркивать, но очень тооооооненько
[User Picture]
From:Владимир
Date:January 25th, 2013 08:42 am (UTC)
(Link)
К вопросу о роботском разбирании страницы. Я так понимаю, что Дмитрий намеренно включил в свой текст эти три элемента, так вот расскажу про свою на них реакцию.
Первый элемент - подчеркивание без цветокодирования - я потянулся кликать, то есть посчитал ссылкой, несмотря на черный цвет.
Второй элемент оказался ссылкой ожидаемо.
А третий элемент (цветокодирование без подчеркивания) не вызвал интуитивного желания кликать, и я сделал по нему маусовер просто для проверки.
[User Picture]
From:desmonych
Date:January 25th, 2013 11:43 am (UTC)
(Link)
молодец, можно было мне не писать заметку, просто оставить эти три приема и каждый бы для себя решил, что верно и как это работает
[User Picture]
From:beshur
Date:January 31st, 2013 01:07 pm (UTC)
(Link)
на мой взгляд, не сработало потому, что уже в тексте было 2 подчеркнутых фрагмента - они получили больший приоритет в мозгу.
[User Picture]
From:zharnov
Date:January 31st, 2013 02:58 pm (UTC)
(Link)
Вообще можно сделать подчеркивание с альфой 25 или 50% - оно не будет таким ярким и сильно мешать

> Go to Top
LiveJournal.com