Об удобстве интерфейсов

[serho]

- очень советую использовать этот тег как можно скорее. например, после первого абзаца

[DezmASter]

уже.

[serho]

и я так понимаю не всю графику отображает

[DezmASter]

точнее никакую не отображал... щас всё ок

[serho]

habracut - очень советую использовать этот тег как можно скорее. например, после первого абзаца

[DezmASter]

произошел какой-то дурдом с форматированием.

[DezmASter]

Вроде бы всё поправлено. Если что-то заметили - пишите :)

[Romek]

Из нового для меня только http://www.crazyegg.com/

Надеюсь для кого-то статья будет полезной.

[DezmASter]

Я тоже на это надеюсь

[runetin]

Какой у Вас стаж работы?
Вам 17, что заставляет Вас писать ликбез другим?

[DezmASter]

Смотрите моё портфолио.

[runetin]

А я его уже посмотрел. И даже поднял Вам карму (даже - потому что кто-то опустил её мне в ответ).
Просто мне стало интересно, что вызывает желание при опыте работы в год и в столь юном возрасте писать статью с рекомендациями. Ведь согласитесь, скорее такое желание ожидаемо от человека, сделавшего уже несколько известных сервисов.

[DezmASter]

а кто сказал что я работаю год? :) Я на сайте фрилансеров год как зарегестрирован.

[runetin]

тогда сотрите надпись "Опыт работы: 1 год" на вот этой странице

[DezmASter]

Да, спасибо.

[DezmASter]

вызывает желание? буду честен, эта статья для тех, кому еще проходить по моему пути. кто считал себя профессионалом, но ничего не знал.

[DezmASter]

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

[paschenko]

В шестом параграфе первый пример - слово "Правильно" смотрится частью примера, необоснованно сдвинутой влево.

[ProRunner]

Пост впечатляет. Мне не пригодится, но позвольте поставить плюсы за труд :)

[DezmASter]

Спасибо :)

[DezmASter]

То что элементы - тексты, изображения, на таких порталах обычно расположены хаотично, и не имеют никакой логики :)

[null]

Супер. Спасибо за столь интересный материал!

[mrlava]

можно было текст весь удалить и сделать больше картинок "Правильно", "Неправильно":)
было бы наглядней... а можно посмотреть Ваши сайты?:)

[kvas]

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

Лучше расскажите почему нельзя использовать розовый на голубом? :)

[DezmASter]

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

[kvas]

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

[DezmASter]

Я не вам :)

[kvas]

http://artlebedev.ru/kovodstvo вот есть.

[Andryuha]

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

С остальным согласен на 100%.

[hilko]

Очень интересно, благодарен.

[nundesign]

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

[Timon]

Каждый вспомогательный элемент на странице должен быть расположен в непосредственной близости от главенствующего над ним элемента.

Сейчас сижу и думаю, правильно ли автор применил данное правило для оформления вышеописанной статьи. Надеюсь это не специально :)

[DezmASter]

Выше было написано что как бы я не старался правильно оформить, как оно выглядело в GoogleDocs на момент написания, ничего не выходило из-за корявого предпросмотра.

[nochnoy]

Наконец-то появился в рунете урл, который я буду кидать всем начинающим горе-вебдевелоперам. Спасибо!

[DezmASter]

Рисовал в разные дни ) статья не за пару часов писалась и переписывалась :) извиняюсь

[iSerge]

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

А так — здОрово, спасибо.

[Idiot]

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

Помните, группировать элементы интерфейса нужно грамотно.

Помним.

Например возьмем интерфейс Google и проследим за взглядом:

Давно хочу приборчик для слежения за взглядом. Где брали, почем?

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

Мне сперва захотелось откомментить статью одной строчкой: «Да что Вы говорите!»

Эта статья для тех, кто не первый год в дизайне

Сколько лет нужно побыть «в дизайне», чтобы забыть значения слов «палитра» и «эргономика»?

Ну вот, а теперь — в минус меня, в минус.

[frst]

про "текстовый балласт" совершенно согласен ;)

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

[ifrond]

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

[drozdovsky]

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

"возьмем интерфейс Google и проследим за взглядом" - просто отпад)

P.S. пытался поставить "плюсик" комментарию ifrond, но он не ставится. Наверное, из-за нулевой кармы - я здесь еще человек новый :)

[DezmASter]

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

[drozdovsky]

Я согласился с тем, что:

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

[DezmASter]

Знаете, меня интересует одно - если все настолько классные дизайнеры, почему стоящих удобных сервисов очень мало?

[drozdovsky]

А каким образом этот вопрос относится к обсуждению вашего поста?
P.S. И не надо, пожалуйста, опускаться до демагогии вроде "почему стоящих удобных сервисов очень мало?".

[DezmASter]

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

Давайте на этом прекратим. Мне просто не нравится суждения людей о том какой я "школьник впервые открывший фотошоп" без оснований для подобных суждений.

[drozdovsky]

Давайте прекратим.

Только вы хотя бы грамматические ошибки исправьте и скриншоты побольше сделайте.

P.S. Удачи! :)

[DezmASter]

Спасибо :) Просто я не очень хорошо знаю русский, грамматику и орфографию правил другой человек :)

[winzard]

Да ладно. Отчего-то когда я утром читаю Ленту.ру или наш Смоленский форум, я не жду, что на меня щас снизойдет озарение или что прийдет Иисус и научит, как жить правильно.
Так же и тут - я и не ждал, что в статье будут крышесносящие идеи и что после нее ведущие дизайнеры страны обратятся лицом к народу и покаются в прегрешениях.
Статья скомпилирована из чего-то (не обязательно передрана, эта компиляция могла пройти через опыт автора, а идеи заиграть новыми красками) - ну и ладно. Будет еще одно напонимание, что дизайном интерфейсов таки надо заниматься.

[Aristei]

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

[drozdovsky]

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

[DezmASter]

за что вам спасибо

[DezmASter]

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

[DezmASter]

и еще. Покажите мне пожалуйста где эта информация "обсосанных уже миллион раз". Хотя бы парочку ссылок. Если вы скинете линк на ководство - то там нет информации о большинстве описанного тут.

[null]

не обращай внимания. статья полезна и интересна. как минимум 1 человеку, кроме тебя (;

[DeMx]

Плюс еще я. ;)

Хотя и не могу сказать, что очень много нового узнал, но хоть кое-какую инфу все же получил... и на том спасибо. :-)

[Ruberoid]

http://designformasters.info/

[DezmASter]

:) Это сайт моего хорошего знакомого. У нас с ним даже договор на взаимоиспользование материалов заключен. Конкретные статьи пожалуйста. Там очень много материалов о тех. стороне реализации интерфейсов, теории там относительно мало.

[devx]

у нас (в рунете, да и не только) полно говно-дизайнеров, которые делают говно-дизайн.
дизайн, в котором не учитываются даже такие мелочи, которые описаны в этой статье.

так, что если Вы все знаете - атлично, а те кто не знают - пускай читают.

[Helg]

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

[FewBrain]

эх, печально всё это.
когда, когда уже будет революция в дизайне русских сайтов?

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

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

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

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

даёшь грамотность в.. в чём бы то ни было!

[DezmASter]

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

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

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

[dic]

Интересная статья, спасибо автору. Обязательно пишите еще.

[TrilinX]

Да нормальная статья, хотя бы меня заинтересовала, и дало еще одну точку зрения человека на ситуацию.

[AirWorker]

Позитивно :]

[amiskov]

Хорошо написано. Спасибо за ссылки.

[winzard]

Я не стал бы приводить Хабрахабр в качестве примера правильного дизайна интерфейса. Меня до сих пор еще клинит на некоторых его кнопках и ссылках.

[DezmASter]

Я привел Хабр в качестве примера отличного использования белого пространства и отсутствия линий раздражающих глаз... Кнопки на хабре уже обсуждались неоднократно :)

[winzard]

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

[DezmASter]

Я еще раз повторюсь - хабр умудрился совместить в себе просто классное удобство, по соседству неудобствами. я думаю его еще неоднократно переделают :)

[Aristei]

Статья полезная, спасибо!

[isapioff]

спасибо! очень интересно!

[natalis]

кг/ам

[webmaster]

Круто :) завидую. В 17 лет я этого не знал.

[Meneldor]

Насчёт радиобатонов: у них есть проблема - нет варианта "не выбрано ничего", а тогда приходится делать или кнопку "сброс", или чекбоксы с JavaScript'ом, которые работают как радиобатоны, но с возможностью отсутствия выбора.

[123]

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

[Cosss]

Хаха, помню я тоже поначалу делал сайты типа "Помощь вебмастеру", давал советы, а у самого страничка была склепана сплошь из клипартов :)

Лучше придумайте какой-нибудь новый элемент интерфейса, или замену старому элементу, как недавно где-то пробегала ссылка на удобный постраничный вывод...

З.Ы. А ваши "клиенты" знают, что вы используете мегапопулярные браши с сайта http://www.deviantart.com? ;)

[DezmASter]

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

-
О брашах.
1. Использование брашей идет отдельным пунктом в ТЗ
2. Если клиент согласен доплатить некоторую сумму кисти будут рисоватся экслюзивно в огромезном разрешении.
3. ОЧЕНЬ часто клиенты сами указывают на узоры которые они хотели бы увидеть... Кстати указывали не с девианта, а с оф. сайтов создателей брашей. Я по девианту лажу очень редко. В частности такая ситуация была с макетом для John Wester...

[Cosss]

1. Ню-ню
2. Вообще я делаю не очень, но если доплатить, я начну стараться...
3. Устройтесь работать в студию, чтоб вам хорошенько мозги протрахали, иначе вам проще будет показывать клиентам готовые шаблоны с темплейтмонстра... Кстати если не с темплейтмонстра, то с оф. сайта шаблона.

[DezmASter]

:)
2. Я так не говорил. Не путайте колбасу с печеньем.
3. Работал, работаю. Мозги трахают. Мозги трахаю. Опять же - утрируете.

Cosss, я Вас прекрасно понимаю. Также вполне понимаю к чему вы клоните, давайте прекратим этот разговор - удовольствия он не принесет никому из нас. Давайте лучше пообщаемся в личной переписке. Мне действительно интересно пообщаться с вами поближе.
Контакты в профиле. ;)

[Cosss]

Какие мы дипломатичные, ну стучись... :)

[DezmASter]

Стукнул на фрилансе. Контактов тут не нашел к сожалению.

[DezmASter]

я не "мы" :)

[ArtemDis]

Перед тем как учить окружающих стоит обратить внимание на себя люимого: http://www.lampochek.net/

[DezmASter]

Мой форум это не я.
1. Я технически сам не могу реализовать полноценную шкурку под свой форум. Для этого нужен верстатель и программист в одном лице. Такой человек есть, но по личным причинам он отсутствует. На самом деле новый дизайн в исходниках уже давно готов... Где-то около 1,5 месяца он лежит у меня в виде 150 файлов *psd...

[segochka]

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

[Lola2grp]

Я веб-дизайном не страдаю, но как обывателю было очень интересно почитать.
Да и со многими пунктакми я согласна.
Приятно, когда кто-то думает о том, чтобы мне было приятнее лазить по сайту. :)

[yaroslavpat]

Клевая статья. Несколько типсов: в словаре пром дизайн забыл выделить полужирным, не сразу понятно. А в верстке примеров ты сам чуток наврал... У тебя слова «правильно» и «неправильно» расположены иногда слегонца наобум. Их надо равнять по левому краю примера, с учетом небольшого свешивания (за полосу) засечек. Будет красивее, поверь;) А статья очень хорошая, реально понравилось.

[DezmASter]

Не сразу, но общее впечатление портит...

Я по поводу звуков высказал в статье своё личное мнение :)

Нет, ни в коем случае не разноцветие. Просто цвет хорошо врезается. Гораздо лучше беленького фона.

Это да. Тоже оттенок ситуации...

Ну почему же? :) Заказчик недоволен работой дизайнера, я думаю от этого дизайнер прыгать от радости не будет, верно? :)

Да, несомненно. Но подскажите - как мне наглядно нужно было изобразить все оттенки "хорошо" или "плохо"? :)