☭Советы

Итоги Конкурса уважаемых советчиков.

Здравствуйте, Артём!

Сейчас существуют два варианта ввода пароля в регистрационных формах — скрытый с повтором и открытый.

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

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

Хотелось бы услышать ваше мнение.

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

Например, неплохо было бы упорядочить натыканные в произвольном порядке логотипы спонсоров с гербами городов. Или написать названия команд, чтоб не приходилось решать логическую задачу типа «если Маша живет в красном доме, то Вася — аквалангист». Или показывать эту панель в нормальном качестве и на весь экран, а не снимать из-за плеча жюри.

Как бы вы сделали эту таблицу?

Здравствуйте, Артём, хотелось бы узнать ваше мнение о правиле «главная страница сайта должна умещаться на одном-двух экранах монитора», причём желательно, конечно, на одном, чтобы скролла на главной вобще не было.

Здравствуйте, Артём. Первый раз пользуюсь подобного рода «услугой». Не буду заходить издалека, вопрос следующий: как вам представленный мной дизайн для тюнинг-ателье? Отстой или нет? Спасибо.

Здравствуйте!

Сейчас разрабатываем сайт по поиску и продаже авиа- и ЖД-билетов.

Это страница с результатами поиска билетов. Справа располагаются фильтры (столбик). Я намеренно его осветлил, чтобы не отвлекаться на него.

По центру, сверху вниз:
1. Направление, на которое ищем билеты.
2. Модификаторы дат (когда пользователь вводил даты поиска, он мог выбрать ±6 дней для даты отбытия и прибытия).
3. Результаты поиска рейсов (количество найденных вариантов, переключатель в «лучшие варианты», страницы, указание применяемых фильтров к результатам поиска (фильтры справа, как я говорил), а также название столбиков («Перевозчик», «Отправка» и т. д.) с возможностью сортировки по ним.
4. Сами результаты.

Каждый блок с результатом содержит: первая часть блока — ТУДА — дату — иконку «удалить» — указание перевозчика (может быть авиакомпания, может быть авиа+ РЖД или несколько авиакомпаний) — время отбытия (и указание откуда) и время прибытия туда — указание времени перелёта (переезда) и количества пересадок (и их продолжительности) — указание класса билетов (для авиа- и ЖД-билетов).

Вторая часть блока — ОБРАТНО — все те же элементы, что и в части «ТУДА».

Далее цена, ссылка на подробности этого варианта (там будет полная информация о рейсах, пересадках и т. д.), а также кнопка «Купить вариант».

Вопросы следующие:
1. Сейчас заказчик говорит, что цена не очень заметна. Как можно ее сделать более заметной?
2. Цена относится ко всему блоку, её нельзя поместить внутрь (сделать ещё одну колонку с ценой), так как тогда её придётся дублировать и для «ТУДА» и для «ОБРАТНО». Но отсюда возник вопрос — как сделать сортировку по цене? Как, например, сейчас есть сортировка по «Перевозчику» или «Времени в пути». Будет ли правильным куда-то сверху вставить ссылку «Сортировка по цене»?
3. Как можно улучшить функцию, которая показана в виде красного выделения рейса и всплывающей подсказки? Эта функция позволяет выбрать (нажать) на конкретный рейс и найти ВСЕ остальные варианты именно с ЭТИМ рейсом.
4. Как можно улучшить/упростить вывод результатов и шапку? Учитывая то, что всё, что сейчас выведено на экран — должно быть отображено.

Заранее спасибо за советы!

А. Г.9 9

Здравствуйте, Артём.

Меня интересует ваша оценка дизайна маленькой вывески.

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

Например, правильно ли использовано короткое тире в диапазоне времени?

И снова здравствуйте, Артём и советчики.

Скажите, удалось ли мне сделать таблицу программ стирки более наглядной и удобной?

Основное требование — простое и быстрое нахождение нужной программы и её основных параметров. Таблица в формате А3 предназначена для домашнего использования (будет лежать у меня на машинке).

Несколько конкретней: 
1. Допустима ли выключка по правому краю в названиях программ?
2. Как улучшить расположение заголовков в столбцах?
3. Уместна ли такая подмена столбцов «отбеливатель», «стирка», «ополаскиватель»?
4. Что ещё можно улучшить и как?
5. Что хорошего?

P. S. Одной программой стало меньше.

Как вам идея авторизации на сайте через файл-ключ?

Попробовать можно и нужно.

Привет, Артём!

В рамках одной из домашек переделал половозрастной график Пермского края, который выложил в одном из своих постов Олег Чиркунов.

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

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

График крупнее.

Здравствуйте, Артём.

Не так давно сделал себе сайт-резюме. Друзья говорят, что нормально, но меня что-то беспокоит. Что вам режет глаз?

Заранее спасибо за ответ.

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

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

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

Добрый день.

Была придумана такая навигация по новостям на сайте. В дизайн вписывается вполне нормально. Много новостей заказчик не планирует добавлять.

Месяц выбирается перелистыванием в верхней части.

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

Иногда (но далеко не всегда) число (цифра на светлом фоне напротив заголовка) расценивается как порядковый номер события. Как сделать, чтобы у пользователя не возникало вопросов по поводу этой цифры?

Здравствуйте, Артём!

Предлагается установить такие стенды на все остановки крупных городов России и мира; информаторы в транспорт — также повсеместно. Оцените идею, исполнение и актуальность данного проекта.

Заранее благодарю вас и советчиков за комментарии и советы.

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

Добрый день, Артём.

По моему мнению, в данном случае ссылка не должна идти со слов «Комеди кафе», потому что получается, что они что-то сделали и дают ссылку на сайт «Комеди кафе». Прав ли я, что второй и третий варианты правильнее?

Здравствуйте, Артём.

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

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

Артём, какое вы видите решение или проблемы нет?

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

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

Кнопки на верхней панели одновременно являются легендой таблицы. Желтые линии под курсором для того, чтобы пользователь не промазал по нужному месту. При наведении на заселённый (забронированный) номер — всплывает диалоговое окошко с информацией о постояльце.

Очень нуждаюсь в обоснованных советах.

Если нужны разъяснения — спрашивайте.

Здравствуйте, Артём и уважаемые советчики!

Недавно потребовалось сделать систему заметок (заданий, пометок, записок) в корпоративном интранете. Долго искал решения для выбора даты, все они сходятся на одном — «выбор года, выбор месяца, выбор даты», но хотелось сделать в один клик и наглядно. Как вы считаете, такой вариант будет удобен?

На странице интранета линейка годов, по клику на неё открывается в новом окошке весь год в таком вот виде, и нам остаётся всего лишь кликнуть в день.

Оправдано ли такое представление календаря? (Отход от разбития на блоки-месяцы?)

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

Что ещё можно улучшить?

Мой вариант борьбы с IE6.

Здравствуйте, Артём. Подскажите, что делать, если карта выглядит так.

Здравствуйте.

Что скажете о работе «Информационных архитекторов»?

Помогите вузу остаться без плохого логотипа. Если вы скажете, что для Харьковского института финансов (http://khif.edu.ua/) этот знак никуда не годится, начну всё сначала.

Рассуждал примерно так: институт финансов = студенты + наука + деньги. Студентов хотелось классических, поэтому в знаке намёк на геральдику. Наука → ученый → магистерская шапочка. Деньги хотел показать в виде двойного столба «Ф», как делают при обозначении валюты.

Фирменный стиль планируется формировать на основании квадрата с оттянутым углом от шапочки и двойной черты от «Ф».

Посоветуйте пожалуйста — я не дизайнер, а не хочется сделать плохо или, по крайней мере, хуже, чем сейчас.

Добрый день, Артём.

Меня зовут Дмитрий, я занимаюсь созданием прототипа туристического портала. На сегодняшний день было принято решение не создавать навороченных функциональных возможностей, а оставить только необходимое. Поэтому из функций остался только каталог стран (курортов, отелей). Суть идеи — дать пользователю представление о стране, курорте и отеле, возможность быстро найти нужный ему элемент и ознакомиться с его характеристиками (удалённость от береговой линии, наличие услуг в отеле, фотографии и т. д.) Возникла потребность в организации каталога. На скриншоте видно, как мы собираемся это сделать (только для стран).

Чем плох такой подход и что можно было бы улучшить? Также необходимо сделать 2-ой и 3-ий уровень вложенности (курорт, отель). Как лучше организовать его? По той же схеме, что и страны, не получится, т. к. на странице страны должны быть ещё описание, фотографии и, собственно, каталог курортов (их гораздо меньше, чем стран). Заранее спасибо за совет.

Хочется сделать простой и удобный (идеальный) конвертер.

Сейчас, мне кажется, интерфейс уже перегружен. Дайте совет в нужном направлении.

Большое спасибо заранее.

Идея агитплаката информационной безопасности в организации.

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

Просто не мог не напроситься на совет: британская линия времени.

Единственное, что мне не нравится, зум получился случайно, а обратно уменьшить можно только кнопкой. Но в целом — гениальная вещь, нет? Впрочем, уверен, Артём и тут найдёт пару огрехов. (Я бы не отказался от картинок и видео к сухому тексту, хоть и понимаю, что это «краткий курс»).

Требуется критика дизайна. Чем больше, тем лучше. Розовый цвет просто попался первым. Заранее спасибо.

Артём, как вы думаете, сделают ли работу удобнее такие вспомогательные области, дублирующие действия кнопок в модальном диалоге?

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

Здравствуйте. Это первый опыт создания интерфейса. Программа учёта сотрудников. Укажите, пожалуйста, в чём недостатки. Заранее благодарю.

Артём, добрый день.

Почему на artgorbunov.ru курсор над горизонтальным скроллбаром имеет вид «движение во все стороны», а не «движение влево-вправо», хотя крутить можно только в двух направлениях?

Спасибо большое.

«Неправильный способ набора [без красной строки] так широко распространён отчасти и потому, что так повсеместно печатают письма и рукописи на пишущей машинке: вместо чёткого и всегда заметного отступа тоже делают «тупую» начальную строку и разделяют абзацы пропуском строки…» — Ян Чихольд, «Облик книги».

Никаких комментариев, почему в вебе так распространён безабзацный способ набора текста, я не нашёл. Артём, какое объяснение видите вы?

Здравствуйте Артём. Подскажите, при создании сайта что раньше должно быть — дизайн или программирование (ТЗ уже есть)? Шеф считает, что можно весь сайт написать, а дизайн — дело последнее, я же, наоборот, считаю, что пока дизайна нет, делать не стоит.

Приветствую Артёма и всех советчиков.

Разрабатываю дизайн для видеопортала христианской тематики, на котором будут выкладываться качественно отснятые материалы в формате HD.  Основной частью страницы просмотра видео будет приведённая область. Очень хотелось все сделать понятно и лаконично. Насколько это мне удалось и что я сделал не так?

P. S. Хочу также добавить кнопочку «Убрать боковую панель», чтобы у пользователя была возможность смотреть видео покрупнее, но не на весь экран.

Артём, как вам один из последних патентов Эпл — «Magic wand»?

Ничего не напоминает?

Какие плюсы и недостатки видите в сравнении с «Командором»?

Добрый день, Артём.

Интересуют два вопроса: 1) ваше мнение по поводу решения отображённой проблемы; 2) ваше мнение по поводу того, насколько хорошо сделана сама графика, правильно ли и понятно ли она отражает проблему.

Заранее спасибо.

Существует ли какое-нибудь дизайнерское правило по расположению символики на узких вертикальных форматах?

Из-за спора на сайте Дельфимастер.ру пришлось перерисовать форму Т-12.

Задача стояла такая: показать, что в таблицах можно обойтись без сетки.

Справился?

Пока форма поиска не заполнена, кнопка поиска не должна быть активна. Чего искать пустое место. Вы согласны со мной?

Добрый день, Артём.

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

Одна из идей — выкладывать наши месячные планы по открытию и развитию магазина. Единственная проблема: как сделать этот график красивым, удобным и читаемым? Решили спросить совета у вас.

Заранее спасибо.

P. S. Обращу внимание, что график ограничен по ширине дизайном: blog.murrr-shop.ru

Здравствуйте. Наткнулся на такую странную кальку с английского: перед именем доктора ставится сокращение «Др.»

Очевидно, что для русского языка это неприемлемо. Сокращение «др.» — это «другое», «другие». Кто-нибудь когда-нибудь встречался с таким? Насколько это распространено? Как правильно поступать в таких случаях?

Спасибо. P. S.: забудем о типографике на картинке, там и так всё понятно.

Здравствуйте!

Нужен совет. Сделал два варианта таблицы с главной информацией о коммерческом предложении (1 вариант не понравился начальнику, 2 вариант не нравится мне, т. к. там всё в один столбик и на странице смотрится криво относительно левого блока с логотипом и меню). В первом варианте, на мой взгляд, всё структурировано и понятно. Уговорить шефа на первый вариант никак не получается, говорит: «непонятно и не известно как читать» (я решил добавить линии, чтобы задать напрваления для чтения, т. е. три столбца по вертикали и нижнее поле по горизонтали с дополнительной информацией).

Вот, думаю, может, спецов послушает :-) Какие ошибки я допустил? Какой вариант лучше (1 или 2) и легче для восприятия пользователем? Спасибо. Надеюсь на помощь.

Привет, А.  Г.! Сколько ни пользуюсь переводчиком, всё думаю — а почему не так? Я прав или я не прав? Почему?

Спасибо.

Мне кажется, было бы интересно раз в неделю выкладывать пример плохой инфографики или просто стопку информации, чтобы люди могли тренироваться, а заодно подсказывать друг другу, как было бы лучше. Вот, к примеру, сегодня в Бизнес-линч попала такая картинка. Как бы вы её переделали? Свой вариант я оставлю в комментариях, если, конечно, этот вопрос попадёт в «Советы».

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

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

Как вы думаете, имеет ли смысл такой ход?

Артём, очень интересно ваше мнение по поводу случая с множеством вкладок.

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

Спасибо.

Здравствуйте.

Как вы относитесь к иконке RSS, что в ней вам когда-либо хотелось улучшить или изменить?

И почему на вашем сайте нет RSS?

Спасибо.

Артём, здравствуйте!

Почти уговорила заказчика, что текст без таблицы будет читаться лучше.

Спасибо за ваши советы! P. S. Сдаю макет 28 сентября.

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

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

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

Может ли, по вашему мнению, уличная навигация, а также такие возможности, как попеременное реверсивное движение сделать Москву немного чище?

Добрый день!

Решив не выносить легенду отдельно, а имплантировать её в описательную часть, столкнулся с дилеммой: в тексте номера деталей идут по порядку (вот у нас деталь 1, другая деталь 2, ещё деталь 3 и т. д.), а на самой картинке — уж как получится; или — на картинке цифры стоят по порядку, а в тексте — вразброс (вот такая деталь 7, другая деталь 3, ещё деталь 15).

Посоветуйте — как лучше сделать?

А зачем, позвольте узнать?

Недавно столкнулся с меганеудобностью в Файндере Леопарда. Проблема в том, что для того, чтобы узнать размер файла, нужно переключить вид окна на список либо вызвать свойства файла по Cmd+i, вместо того чтобы просто увидеть размер в строке состояния.

Но мало того, дело обстоит ещё хуже, если нужно узнать размер нескольких выделенных файлов сразу.

Привычная комбинация вызывает по одному окну свойств для каждого файла (представьте что будет, если выбрано 500 файлов), а для просмотра суммы приходится жать уже Cmd+Alt+i, что совершенно нереально сделать одной рукой, хотя есть вариант вызвать всплывающее меню, кликнув правой кнопкой мыши с зажатой Alt и выбрав там «Показать инспектор». Но это целая куча действий!

Как-то не вяжется всё это с дружественностью остального интерфейса Маков.

Вопросов в общем-то два:

1) Оправдано ли такое решение с точки зрения построения интерфейса, ведь найти нужную функцию очень сложно, не зная о шорткатах и не видя без нажатой Alt этой возможности в контекстном меню.

2) Есть ли у кого-то оригинальные решения по улучшению ситуации?

И ещё один вопрос Артёму — считаете ли вы, что это упущение разработчиков системы или просто нужно привыкнуть?

Здравствуйте, Артём.

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

Заранее спасибо.

Здравствуйте, Артём!

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

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

Теперь я не могу определиться: что же мне выбрать? Первый вариант мне кажется наиболее приемлемым, но и второй вроде бы неплох. Артём, подскажите, пожалуйста, и прокомментируйте идею в целом.

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

Это — новый стартап audme.ru, поисковик музыки. Помимо поиска, я постарался максимально решить проблему хранения найденных песен вне жесткого диска пользователя, дать возможность доступа к ним откуда угодно.

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

Здравствуйте, Артём и уважаемые советчики.

Я вступил с ребятами в дискуссию по поводу способа написания «копирайта» на сайтах.

Моё мнение: за знаком © следуют годы, за ними — правообладатель. Я считаю, большую роль играет временой интервал существования сайта (компании). А правообладателем практически всегда является та же компания, о которой сайт.

Мнение ребят: правообладатель важнее временного интервала.

Что вы думаете?

Артём, добрый день!

Могли бы вы рассказать о системе работы, используемой в Бюро? Как вам удаётся эффективно работать без учёта времени и с удалёнными дизайнерами?

Здравствуйте.

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

Есть 10 объектов, в каждом объекте 3 зоны, в каждой зоне 2-5 температурных датчиков (всего около 100 датчиков), есть граничные значения (мин/макс) для каждого датчика, зоны, объекта с различными степенями критичности. Считается, что для отслеживания динамики необходимо рядом видеть исторические средние данные за 15 минут, 1 час и 1 день, мне эта идея не очень нравится, но другой придумать не могу. Значимым считается отклонение от 1%.

Все это вместить на один экран, да ещё чтоб наглядно было, пока не получается, думал уже и стрелочные индикаторы рисовать, и розы, и гистограммы, уже идеи закончились :-(

Приветствую!

Артём, в совете от 11 июня 2009 года есть мечта о полноэкранном режиме для картографических сервисов. Близко ли мы к ней подобрались на zdesnekuryat.ru?

• И верны ли дополнительные ходы для достижения этой цели:
• полупрозрачные поля форм для того, чтобы ненароком не закрыть нужную точку;
• возможность «перетаскивать» карту даже между полями формы?

Что можно улучшить для того, чтобы было проще и удобней добавить и найти определенное место?

Здравствуйте. Как думаете, такая выбиралка даты удобна?

Здравствуйте, Артём и уважаемые советчики.

Это заявка, которая отправляется по факсу. Что можно улучшить?

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

Или делать, как на Вебораме, прикреплять к верху?

Что же делать, когда такая страница? Как правильно?

Мне такое расположение клавиш представляется удобным по трём причинам.

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

Если советчики приведут минимум 3 контраргумента, соглашусь, что традиционное расположение клавиш имеет право на существование.

Хочется разработать удобный интерфейс для ведения учета расходов на ЖКХ (газ, электричество, вода) и побочные нужды (мобильник), а также позволить легко и быстро анализировать данные и делать правильные выводы. В качестве инструмента планируется использовать Microsoft Office Excel 2007. Необходимое условие — расширяемость — возможность легкого добавления новых данных (новый месяц, год).

В текущем примере (см. скриншот) не устраивает повторение данных, одни и те же таблицы (справа) дублируются по три раза.

Из плюсов могу отметить: 1. Зелёными ячейками обозначен минимальный платёж за год, оранжевыми — максимальный. 2. Высокая информативность, пусть и не в очень удобном формате. 3. Для обозначения категорий затрат использовано цветовое кодирование, знакомое нам из детства (вода — голубой, газ — зелёный и т. д.)

Ещё одна особенность — за мобильник приходит счёт раз в месяц, за всё остальное — раз в два месяца.

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

Спасибо.

Артём, а вы пытались когда-нибудь выбрать подходящий тариф на сайте сотовой компании?

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

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

Далее, по убыванию приоритета — стоимость звонка на телефоны моего оператора (или количество бесплатных минут) — стоимость звонка на обычный телефон — стоимость звонка на номера моего оператора по всей России — количество SMS (или стоимость каждого) — объем трафика GPRS.  Например, абонентсткий тариф Бла-Бла — 1250 руб. (месячная плата) — МТС бесплатно — 100 минут, 3,05 руб. после — 3000 мин. МТС Россия — 50 SMS — 50 МБ.

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

Разрабатывается интерфейс комментариев. Что можно улучшить, какие ошибки допущены?

Добрый день, Артём и уважаемые советчики!

Помогите понять, насколько хорош этот пагинатор для мобильной версии сайта? Что можно улучшить? Предполагается, что на сайте будет много страниц с текстом и картинками. iPhone и другие touch screen девайсы не учитываем. Изначально это устройства с экраном в 240 на 320 пикселей. Спасибо!

Здравствуйте, Артём!

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

Но проблемы возникли с шапкой — она огромная и бестолковая :( Что нам с ней делать?

Карта не влезает в разрешение 1280 на 800 (по статистике это наши основные посетители). Как сделать так, чтобы и карта на месте была, и пользователю было удобно?

Что не так? Где наши расчёты и просчёты? Просьба, подскажите что не так?

P. S. Читаем-смотрим ваши советы все как один на подбор, а вот где у нас ошибка, не поймём :(

Добрый день!

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

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

Не было бы логичнее использовать обратное расположение названий трасс, как на иллюстрации ниже?

Спасибо!

Здравствуйте, уважаемый Артём и советчики!

Всем известна идея Джефа Раскина об автоматическом сохранении информации и отсутствии кнопки «Сохранить». Как вы думаете, действительно ли в будущем не будет таких кнопок? Как дать понять пользователю, что вводимые данные сохраняются автоматически? Попутно хотелось бы услышать о способах возможной реализации задумки.

Как вам мысль закрытия окна с «Esc» вместо [x]?

Здравствуйте, коллеги!

Нужно разработать интерфейс администрирования интернет-магазина новых оригинальных запчастей. На картинке дизайн модуля «Отгрузка товара».

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

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

Запчасти могут быть сняты с производства и заменены на более новые, об этом можно узнать только после заказа к поставщику, а точнее, после прихода запчастей на склад компании. Т. к. поставщик информирует, что запчасти будут заменены на новые, но может отправить и старые, если были запасы на складе. Получается, что о заменах мы узнаем в момент заказа к поставщику, а о том, что в посылке, только после прихода запчастей на склад компании (вот такая консервативная особенность работы поставщиков в Японии :-)

Если заказ большой, поставщик может отправлять запчасти партиями. Менеджер связывается с клиентом, информирует его о том, что уже пришло на склад и может быть ему отправлено. Этот момент называется «частичная отправка». Но такая ситуация приводит к увеличению стоимости доставки. В случае отправки замен в блоке «Отгружено …» отображается, что было отправлено клиенту.

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

Операции «отгрузка» и «снятие с отгрузки» можно отменить.

Удалось изобразить написанное выше? Какие недостатки имеет интерфейс, что можно улучшить?

Спасибо за внимание!

Здравствуйте, Артём.

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

Заранее благодарен за помощь.

Здравствуйте! Делаю новый дизайн для своего проекта о фотографии. «Задизайнил» главную страницу, хотел сделать как можно проще, чтобы основное внимание было на тексте и фотографиях. Удалось ли мне? Или совсем никак?

Было бы так же интересно услышать советы по улучшению.

Спасибо.

Артем, добрый день!

Сделал два графика посещаемости (только уникальные айпишники): на месяц (с днями) и год (с месяцами). Числовые данные и в том, и в другом случае в зависимости от максимального посещения автоматически варьируются.

Скажите, всё ли сделано правильно?

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

Для чего нужна висячая пунктуация в вебе? Что она дает для текста и читателя?

Добрый день!

Во время разработки дизайна для моей курсовой (небольшая метапоисковая система) у меня появилась пара вопросов:
1) Уместно ли так использовать ссылку «все», особенно так часто и, если нет, то как лучше?

2) Как избавиться от повторов слова «ссылка» в списке новостей (ссылка справа — другая и ведёт на оригинал) при условии отсутствия у новостей заголовков?

Спасибо.

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

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

Делаем рейтинг сайтов.

Какой вариант правильней?

Как вам идея в первый добавить рядом с доменом название сайта на русском или языковые версии сайта?

Добрый день.

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

Здравствуйте, Артём!

Меня тоже зовут Артёмом, я из Нижнего Новгорода.

Я делаю сайт — магазин фирменных виниловых пластинок, и решил сделать его со сменой страниц как на вашем сайте (ссылка на учебный центр) или тут: www.work1.xxlonline.ru.

1. Стоит ли использовать такой принцип переключения страниц при большом каталоге?
2. Не потеряется ли посетитель между страницей корзины и каталогом? Не испугается?
3. Как бы сделали вы?

Большое спасибо!

Здравствуйте.

Попробовал улучшить адресный блок (первый вариант).

Допустим ли второй шаг, работает ли третий, и насколько четвертый лучше третьего и первого?

Что еще можно сделать?

На рисунке представлен прототип визуализации итоговой статистики тестирования: количество заданных и не заданных вопросов; из общего количества заданных вопросов выделены вопросы, на которые даны правильные ответы, вопросы, на которые даны неправильные ответы и вопросы, на которые не даны ответы (пропущенные вопросы).

Все запланированные вопросы, на которые не были даны ответы (незаданные и пропущенные вопросы), при подсчёте итоговой оценки относятся к вопросам, на которые даны неправильные ответы.

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

Получилось ли представить описанную информацию графически?

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

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

Артём, как, по-вашему, может быть улучшено представление статистики в ЖЖ?

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

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

Здравствуйте, Артём!

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

Наша фирма выпускает микропроцессорные системы для железных дорог. Одним из продуктов является Микропроцессорная централизация для ж/д станции (МПЦ-И) и у него есть АРМ-ДСП (автоматизированное рабочее место дежурного по станции). Это такая программа, с помощью которой дежурный руководит движением на станции: переводит стрелки, открывает светофоры и т. д.

Так вот, сколько работаю, столько не могу спокойно смотреть на это убожество, которое из себя представляет интерфейс этого АРМ-ДСП. И вот недавно отважился и решил его подправить. Не изменить, а просто подправить, чтоб стало хоть чуть-чуть удобнее и приятнее. Сделал. Пока делал, прочитал почти все ваши Советы и Ководство на сайте студии Лебедева. Да и так много всего увидел. И когда смотрю на то, что сделал, меня не покидает чувство, что ка к-то что-то не так. Поэтому и решил написать вам.

Заранее благодарю.

Дисконтная программа, предназначенная избавить людей от ненужной мелочи. Округляет сумму покупки до 50 копеек в пользу покупателя. Что думаете?

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

Артём, дорогие друзья! Подскажите, пожалуйста, как сделать таблицу лучше. Говорят, она не наглядная и плохо читается.

Очень часто табличка «Режим работы» первая встречает посетителя. Как на ваш взгляд, выполняет ли она свою функцию? Что можно улучшить?

Артём, недавно установил на телефон Opera Mobile. Сама программа достойна отдельного обсуждения, так как кажется мне лучшим браузером для тач-фонов. К Опере доступны ещё виджеты, один из них меня особенно заинтересовал: AccuWeather. Мне кажется, очень удобный и наглядный погодный клиент.

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

Артём, я тут сформулировал ряд соображений об удобстве работы с электронным текстом. Буду благодарен тебе за комментарии к ним.

Шесть тезисов об идеальной электронной книге

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

Почему так удобна классическая бумажная книга? Потому что с ней можно обращаться как с физическим объектом, что позволяет совершать большое количество понятных и очевидных операций. Например, её можно положить на видное место, чтобы не забыть. В ней можно делать пометки. В ней удобно ориентироваться. Легко заложить место, на котором ты остановился, можно сделать любое количество закладок для любых целей. Работа с ней хорошо запоминается, потому что в процессе этой работы участвуют не только глаза, но и руки, а также ориентация в пространстве — мы помним, как книга выглядела, сколько весила, где лежала, легко ли перелистывать страницы и т. п. Чем бумажная книга неудобна? Сложностью переноса результатов работы с ней в электронную среду (пока электронной среды не было, и сложностей таких практически не возникало): отсутствием поиска, копипаста, шейринга, доступа из любой точки пространства-времени.

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

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

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

1. Электронная книга должна быть доступна на вебе в хтмл-формате. Только это позволит обеспечить максимально возможный доступ к ней из любых мест и с любых устройств. Любые другие форматы заведомо снижают удобство работы с книгой, потому что снижают её доступность.
2. Электронная книга должна иметь воспринимаемый человеком урл, находиться целиком на одной странице и содержать свое название (то, что её идентифицирует в мире книг — обычно автор+название) в тайтле страницы. Это связано с удобством поиска книги в сети и оперирования с ней как с самостоятельным объектом. Единицей операторики в сети является урл, следовательно, книга должна совпадать с урлом, чтобы на нее можно было кинуть ссылку, положить в закладки или найти через поисковик.
3. Электронная книга должна быть опубликована черным шрифотом на белом фоне, и не должна содержать на странице никаких элементов, не относящихся к книге. Исключением могут являться только навигационные шапка и подвал (но и их следуется стараться уменьшить или избежать вовсе). Ни в коем случае никакой навигации или посторонних объектов по ходу текста или по сторонам от него. Ничто не должно отвлекать внимания читателя от самого текста. Ничто.
4. Электронная книга должна быть оформлена и размечена в соответствии с правилами типографики на вебе (для примера – версия Тёмы Лебедева от 2000 года, очевидно далеко не полная). При распечатке книги она должна выглядеть так же, как на экране (страницы и контекстная информация — название, урл, дата — проставляются средствами браузера).
5. Электронная книга должна предоставлять читателю персональные инструменты обращения с собой, такие как:
   • возможность дать ссылку на конкретный абзац текста (пример);
   • возможность поставить закладку в произвольном месте текста;
   • возможность выделить/пометить некоторый произвольный кусок текста (например, в качестве цитаты);
   • возможность оставить комментарий к произвольному месту в тексте (наиболее близким к этому функционалу на сегодняшний день являются поабзацные комментарии, как на drive.ru или translated.by);
   • возможность поставить ссылку на другую страницу в интернете с произвольного куска текста.
   Все эти функции аналогичны чтению обычной бумажной книги с карандашом, но только с учётом особенностей электронной среды.
6. Электронная книга должна предоставлять возможность коллективного или публичного чтения книги, то есть возможность сделать весь набор инструментов из предыдущего пункта доступным группе читателей или вообще любому читателю. Интернет — в первую очередь коммуникационная среда, книги здесь можно и нужно читать как коллективно, так и публично.

М703, М704, МТ705 — модификации, корпус чайника, нагреватель и т. д.— блоки. Модификаций может быть много, блоков — ещё больше!

Если проект большой, то для уменьшения путаницы ведётся учёт занятых децимальных номеров. Часто случается, что устройство имеет несколько модификаций, номера которых отличаются от номеров прототипов лишь на пару добавочных цифр.

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

Здравствуйте!

Я наткнулась на схему трассы очередного этапа «Формулы-1», которую здесь и публикую. Как вам кажется, что в этой схеме можно оставить, а от чего навсегда отказаться? Хороша ли она и как она могла бы выглядеть в своем лучшем исполнении?

Спасибо!

Здравствуйте!

Переделываю дизайн сайта, стиль информационный.

Подскажите, пожалуйста, как можно таблицу переделать так, чтобы она была горизонтальной? И что скажете про то, что рекламный баннер с авто Jaguar висит слева от текстового блока?

Спасибо.

Здравствуйте. Я нарисовал свой вариант схемы мск метро. Мне интересно ваше мнение. Спасибо.

Предыстория: никогда не понимал надписи «на себя», «тянуть», а также различные изображения со стрелками, помещаемые на дверях. Всегда вначале подхожу к двери — пытаюсь дергать, читаю, осмысливаю и потом делаю, что написано.

Задача: толково объяснить с какой стороны двери «на себя», а с какой «от себя».

Решение: cо стороны «от себя» просто убрать ручку у двери, кроме как толкать больше ничего и не сделаешь — проблема решена.

Со стороны на себя: оставить ручку и положить коврик изображающий полукруглую потертость от контакта двери с ковриком.

А как бы вы решили задачу? Просто мозговой штурм.

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

• Усложняем:
• чем меньше места это все будет занимать, тем лучше (не сильно ведь важная колонка);
• не хочется менять цвет текста/фона строк таблицы, это порой используется для других целей (неважные/нередактируемые ячейки, подсветка измененных, зебра и т. п.)
• чекбоксы подошли бы, но они обычно уже заняты для групповых операций (перемещение, удаление и т. п.)

Какой способ выбрали бы вы?

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

Уважаемый Артем.

Уже долгое время на сайте Лебедева выложен проект «Люксофор». Если отбросить изыски визуализации, то, на мой взгляд, Лебедев не предлагает ничего нового. Мне кажется что светофор будущего мог бы выглядеть вот так.

А что вы думаете по этому поводу?

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

Уважаемый Артем, дорогие друзья!

Есть одна задача, которая давно тревожит мой мозг.

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

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

Что бы вы предложили?

Артем!

На базе Гугль-докс реализовал систему бронирования кабинетов несколькими арендаторами (коллективный доступ к документу).

На ваш взгляд, что можно улучшить? (я ни разу не дизайнер).

Алексей.

В школе ученика (меня) попросили переделать обычные диаграммы.

Вот что получилось. Хорошо ли?

Представляю кусочек панели управления информацией о сотрудниках на сайте организации.

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

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

Артем и другие посетители, здравствуйте!

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

На изображении — два блока. На первом — форма выбора раздела для доступа и форма выбора срока доступа (можно выбрать только один чекбокс). Когда оба парамера выбраны, кнопка «Готово» активируется. После нажатия получаем второй блок. В нем отображаются выбранные разделы с возможностью удаления. Кнопка «Готова» — не активна, т. к. ничего не выбрано. В поле «Итоговая сумма» подсчитывается сумма всех услуг, подлежащих оплате.

Ссылки, подчеркнутые _ _ _ _ , открываются без перезагрузки страницы.

За визуальное исполнение просьба не пинать, т. к. доведением до идеала буду заниматься не я. Моя задача — грамотно раставить все тексты, формочки и пр.

Интересуют, в частности, следующие вопросы:

1. Насколько допустимо совмещение стандартных html форм (чекбоксы, выпадающие списки) с рисованными, индивидуальными элементами (крестик удаления, кнопки «Включить», «Готово»).
2. Насколько удачно расположены элементы, понятно ли, что после выбора раздела выбранное отображается справа? Может, стоит с цветами шрифтов поэкспериментировать?
3. Уместно ли использовать ссылки без перезагрузки, до открытия ссылки будет отображаться только верхняя часть (название со ссылкой, статус: «Активен», «Не активен»).

Спасибо!

Здравствуйте, Артем!

Пишу вам, как отчаявшийся человек: начальство требует представить динамику изданий по шаблону (Эксель, кривые с опорными точками), а я вижу, что график совершенно беспомощный — кроме лидера никого не различишь (а на второй оси его делать еще хуже) Часть данных за 2005 отсутствует, из-за чего внизу разрыв…

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

Собирать аудиторию «наименьших изданий» в одну линию — не хотят. Разносить на несколько графиков — соглашаются неохотно («Вот, если не будет другого выхода, но и так нормально…»).

А что нормально? Оптимизация тут возможна?

Предлагаю нехитрое улучшение для ценников в супермаркетах: дополнительно показывать стоимость килограмма/литра продукта.

Что еще можно сделать, чтобы покупатель меньше ломал голову перед тем, как взять что-то с полки?

Здравствуйте, уважаемые Артем и советчики.

Это страница каталога товаров. Вложенность рубрик небольшая, максимум три уровня. Интересует ваше мнение:

1. Сверху видим родительскую рубрику. Текущий раздел подсвечивается. Стоит ли столько места выделять для навигации по каталогу? Или в конечной рубрике на месте каталога, показывать производителей (сейчас они спрятаны в фильтрах)?

2. Приемлем ли представленный способ фильтрации товаров? Пользователь видит, какие фильтры включены, при нажатии на «Изменить параметры» раскрывается форма с параметрами. 

3. Как лучше показывать список страниц? Очень не нравится многоточие, но по-другому не знаю как показать лучше страницы, если их будет несколько десятков (а, может, и сотен). Нужна возможность перехода на последнюю и первую страницу, если мы находимся, к примеру, в середине списка. 

4. Стоит ли сворачивать каталог на странице товара и показать только хлебные крошки?

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

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

Здравствуйте, Артем! Это — переделанный фрагмент таблицы оптимального приема продуктов. Является ли такой метод отображения информации наиболее наглядным? Посоветуйте, пожалуйста, что нужно изменить и как увеличить информационную плотность диаграммы.

Эта таблица содержит информацию о том, в какое время лучше всего перевариваются и действуют на тело различные продукты и специи. Такие таблицы часто используют в аюрведической кухне, где нюансов очень много, и, особенно на первых порах, трудно ориентироваться во времени. 1 2 3 4 … 21 — это время на часах. В исходнике продукты были разбиты также по времени начала и конца оптимального периода их приема, однако, если посмотреть на диаграмму, то вполне ясно, где начинается тот или иной отрезок.

Источник — сайт доктора Торсунова.

Хотел бы узнать ваше мнение по поводу размещения двух логотипов на визитке.

Ситуация следущая: маленькая и не очень известная фирма, являющаяся локальным представителем крупной и известной компании, хочет визитку с двумя логотипами — своим и той большой фирмы. С одной стороны, мне как дизайнеру претит использование на визитке более чем одного логотипа (может быть, напрасно?). С другой, вполне понятно желание заказчика заказчика отразить «факт представительства» с помощью известного и уважаемого лого.

Случалось ли вам сталкиваться с подобной ситуацией? Встречались ли вам удачные визитки с двумя логотипами?

Спорим с арт-директором по поводу подачи ленты новостей.

Это — список. Насколько корректно делать его в виде абзацев, без буллитов?

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

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

Первое тире — буллит, второе — выполняет свою главную функцию. Неэстетично.

Здравствуйте, Артем.

Хочу предложить свой вариант ввода границ диапазона пользователем. Во-первых, ползунки вместо полей ввода, все равно точные значения границы при поиске такого рода не интересуют никого. Ну и, во-вторых, отображается сразу распределение «элементов поиска» по шкале параметра. Таким образом, мы сразу можем исключить поисковые промахи, когда во введенные границы диапазона не входит ни один из «элементов поиска». Здесь даже кнопки «Применить» не требуется, просто через некоторое время простоя (0,5-1 сек) текущие значения границ передаются серверу.

Какие недостатки вы видите?

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

Я не претендую на оригинальность, скорее всего, подобная идея была озвучена, причем не раз. Нагуглить по теме не получилось.

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

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

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

Девять базовых дисциплин кодируются девятью основными цветами (пока что не удалось этого сделать, не смог покрасить сегменты ленты в витке, плохо изучил Макс).

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

Виток спирали — это итерация. Отношение между радиусов между соседними витками спирали — прирост объекта проекта. Это интегральная величина, учитывающая как наличие документации, так и функционал, описанный в ТЗ.  Высота витка — длительность итерации. На спирали можно отобразить все стандартные ситуации (вторая фигура), пока что мне не удалось найти контраргумента. На самом деле спирали должно быть две: одна — это фактический результат, вторая — результат запланированный. Как мне кажется, в 99% случаев план и факт не сходятся. Две отображенные спирали (фактическая и плановая ) с легкостью и наглядно покажут отклонения, как по конкретной итерации, так и по всему проекту (пока что не получилось визуализировать, т. к. плохо знаю 3Д-Макс, рисовать от руки не умею).

Проекции спирали должны сопровождаться дополнительной информацией — длительность каждой задачи в рамках итерации, ее стоимость, исполнители, расхождение плановых и фактических значений и т. д. (много чего можно придумать!). Частично эта информация приведена на второй фигуре.

Артем, уважаемые советчики, что думаете а таком способе подачи информации о проекте? Удобен ли способ? Есть ли у него будущее? Благодарю за критику.

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

Как вы поступаете в таких ситуациях?

Какой способ представления информации на ваш взгляд удобнее?

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

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

Артем, привет!

В последнее время появилось много «движков» для быстрого развертывания социальных ресурсов различной направленности. Один из них, Лайв Стрит, технически неплох, но дизайн полностью копирует с одного более известного ресурса. Со всеми плюсами и минусами. Вчера, случайно посетив этот ресурс, узнал о конкурсе на «дизайн по умолчанию». В свободное время я поучаствовал.

Собственно все очень просто, функционал «движка» пока совсем не сложный, но есть два момента: 

1. Когда пользователи комментирует какую-либо статью, на главной странице этот комментарий появляется в графе последние комментарии. Я решил показывать часть комментария и к чему этот комментарий относится, но что-то места занимать стало прилично. Мне нравится, но это, возможно, от эффекта привыкания. Обоснована ли отдельная строка с первыми словами комментария (как в почте)?
2. Рейтингование. Сначала сбоку у каждого поста висел подобный контрол, теперь инлайн в строке внизу. Вроде хорошо, но не от привыкания ли?

Артем, какие еще есть работающие способы кодирования посещенных ссылок, кроме изменения их цвета?

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

Что вы думаете вообще об a:visited, когда стоит особо выделять такие ссылки?

Во время подбора расстояния между числом и существительным (чье количество обозначает число), я заметил, что при кегле 12 п. расстояние в 3-4 п. создает ощущение межсловного пробела, а пробел в 6 пунктов — ощущение другой колонки. Это навело меня на мысль о таком исследовании: как влияет межсловный пробел на степень близости между двумя словами. Удалось ли хорошо проиллюстрировать исследование? Заранее спасибо.

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

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

Имитировать можно, например, с помощью ХТМЛ-кода:)

Артем, здравствуйте.

У нас в студии намечается выпуск очередной системы управления проектами (аналог BaseCamp, только многим лучше =). В нем для наглядности будет присутствовать диаграмма Гантта с распределением задач по проекту. Что можно улучшить? Заранее очень благодарен за информацию.

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

Я нигде не встретил реализации вышеописанной идеи. Что вы об этом думаете? Как еще можно было бы улучшить жизнь циферблатникам?

Здравствуйте, уважаемые сотрудники студии.

Так как я не являюсь дизайнером или специалистом по графическому интерфейсу, то у меня возник вопрос: «Корректно ли я предоставляю пользователю информацию?».

Ставилась задача: предоставить пользователю простой и понятный интерфейс для создания/ редактирования интеллектуальной маршрутизации вызова (IP-телефония).

Мое решение: так как маршрутизация представляет собой дерево, то и было решено мною предоставлять пользователю профиль маршрутизации в виде древовидной структуры в веб-интерфейсе, сохраняя состояние дерева.

• Не вдаваясь в подробности, постараюсь донести главную идею: существуют «кирпичики», благодаря которым пользователь задает необходимый алгоритм обработки входящих вызовов:
• «номер» — переадресовывает вызов на указанный пользователем телефонный номер. Имеет три выхода: «занято», «отвечено» и «не отвечено».
• «интерактивное голосовое меню» (IVR) — пользователь задает звуковой файл, в котором указываются возможные варианты дальнейших действий (тональный набор).
• И т. д.

При клике по «кирпичику» открывается окно, в котором можно произвести редактирование свойств элемента, при клике по «+» можно добавить «кирпичик», a при клике по красному крестику происходит удаление «кирпичика» (вершины дерева).

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

Здравствуйте, Артем.

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

Подскажите, каким образом, в данном случае, можно указать то, чем занимается сайт, при этом не потеряв минимализм. Заранее благодарен за помощь.

Артем, здравствуйте!

Во время очередной попытки логично и удобно проименовать и сгруппировать контакты в памяти сотового телефона, размышлял о методе, который бы позволил искать нужные контакты за минимальное время. Возникла идея назначать контактам теги, а популярные нынче сенсорные интерфейсы смогли бы обеспечить удобную и наглядную навигацию в виде «облака» тегов. Таким образом, поиск контактов, даже с учетом сразу нескольких критериев, производился бы за несколько кликов. На иллюстрации я показал ситуацию, когда, допустим, нужно сделать звонок коллеге из отдела маркетинга: выбираем тег «работа», затем тег «маркетологи», затем нужный контакт. Как вы думаете, идея жизнеспособна?

Разные почтовые программы (на рисунке — Windows Mail и The Bat!) предлагают различные механизмы доступа к файлам, вложенным в сообщения.

Интересно, что уважаемые коллеги могут сказать о плюсах и минусах различных вариантов?

Как вам такой способ отображения текущей раскладки?

Когда пользователь начинает печатать — флажок пропадает (пользователь и без флажка по буквам может определить активную раскладку). Останавливается — флажок вновь появляется. Главное преимущество, как мне кажется, что человеку нет необходимости бегать глазами между полем ввода и местом, где в операционной системе отображается активная раскладка.

Здравствуйте.

Это расписание учебных занятий для студентов.

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

Насколько такой подход оправдан и что можно улучшить?

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

Как вам такой интерфейс? Можно ли тут что-то еще испортить?

Постепенно начинаю использование различных приемов, которые находятся в «закромах».

Артем, насколько разумно использовать подобную навигацию? Называется «зачемопятьвменюлезть».

Артем, почему вы с «Нордик Дизайн-блогом» выбрали значок с маковской клавиатуры в качестве «фавикона»? Чем вы руководствовались?

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

Приветствую, Артем!

Вот это изображение — условный баннер, большой, висящий где-нибудь, допустим, на заборе. Я подобных много делаю. Внимание, вопрос.

Среди наших (украинских) рекламщиков бытует мнение, что типографика в рекламных объявлениях не канает, даже процитирую: «В рекламе никаких правил чтения и пунктуации нет». Вот эти тире они предлагают заменить маркерами, убрать точки с запятой. Я же считаю, что, наоборот, из-за современной рекламы люди совсем разучились правильно писать. Поэтому во всех работах делаю все по правилам орфографии и пунктуации, что бы это ни было. Тем более, по моему мнению, типографика на больших размерах смотрится прекрасно. Упрямые рекламщики говорят, что типографика отвлекает от текста. Я считаю это глупостью и все равно буду делать так, как считаю нужным и убеждать всех в том, что они не правы.

Что скажете вы по этому поводу? Просто интересно ваше мнение.

Артем, приветствую!

Экспонаты музея представлены в хронологическом порядке. Внизу страницы находится оглавление в виде последовательности номеров, при наведении — превью.

www.lisenko.ru/museum/timeline/

Вопрос: насколько это очевидно, наглядно? Ведь при значительном обновлении список цифр будет сплошной полосой (или уже ею является).

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

Вы видите перед собой страницу с (огромным) списком московских офисов обслуживания на одном из самых удобных в России банковских сайтов.

Мне кажется неоптимальным представление адреса офиса, но не об этом речь. Предположим, что сейчас 18:30, и мне надо во что бы то ни стало попасть в любое работающее в 20:00 или 21:00 отделение банка. Как я его найду? Или скажем, сегодня суббота, а в воскресенье мне надо забрать деньги из банка. В какой офис я могу обратиться?

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

Недавно решил попробовать рисовать и столкнулся с проблемой определения твердости грифеля карандашей, стоящих в карандашнице или лежащих на столе. Обозначения Н, НВ и т. д. почти никогда не видны. Казалось бы, мелочь, но раздражает. Приходится постоянно вытаскивать их по очереди, чтобы увидеть маркировку и найти нужный карандаш. Если они лежат на столе, то вероятность видимости маркировки 1:3, так как граней шесть, а прочесть обозначение (без совершения каких-то действий) можно только с двух.

У круглых карандашей видимость такая же.

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

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

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

Артем, что вы думаете о нотации Гарретта? Какие инструменты и как вы используете в работе над проектом для проектирования архитектуры, интерфейса и навигации?

Добрый день.

Хотелось бы услышать вашего совета.

Делаем открытый сервис «Сколько стоит хороший сайт?»

Как можно максимально улучшить интерфейс?

Иллюстрации не прикладываю — т. к. несколько рабочих экранов на сервисе.

Здравствуйте, Артем!

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

• Вариантов — чтобы и пользователю угодить, и слишком больших возможностей редактирования кода ему не давать, я вижу несколько:
• 1) Все-таки WYSIWYG, но с сильно урезанной функциональностью и набором предопределенных стилей. Но этим от копи-паста из Ворда не защитишься… Возможно, фильтровать теги при сохранении?..
• 2) BBCode, ну или какая-то вариация на тему… Плюс возможность быстрого просмотра изменений.
• 3) Использовать HTML и кнопки для форматирования для тех, кто не знает тегов, и тоже с возможностью предварительного просмотра.

Что посоветуете? Чтобы и клиенту сделать удобно, и дизайн сайта не портить?

Артем! Товарищи!

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

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

Обычно убывающие или возрастающие величины указывают стрелочкой вниз и вверх (А). Считаю, что эта стрелочка не точно отображает суть. Величины убывают с каждым последующим элементом, а не сразу взяли и обвалились. Лучше ли использовать наклоненную стрелочку (Б)? Она больше похожа на «с каждым последующим элементом значение уменьшается».

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

Эта карта была нарисована на Дрибблере до начала игр на Евро-2008. Очень интересно почитать комментарии.

У меня есть желание насытить ее, отразить интересную статистику, но об этом позже.

Задача: сделать так, чтобы водители пропускали пешеходов на пешеходных переходах.

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

Предлагается для этого использовать наклеиваемый на заднее стекло автомобиля знак «Пешеходный переход» с зеленым фоном.

+ Знакомое обозначение пешеходного перехода быстро и однозначно распознается. Отличается от настоящего знака — не вызывает недоумения, будучи наклеенным на стекло.

− Без объяснения, возможно, может пониматься и неправильно. (Однако первое торможение перед пешеходным переходом едущей впереди машины со знаком, пожалуй, послужит таким объяснением :-)

Артем, как вы считаете, это хорошее решение?

Описания не должно требоваться.

Что я сделал не так?

Артем, как вы посоветуете упростить таблицы такого рода?

Здравствуйте.

Я занимаюсь составлением собственного резюме, дошел до этапа описания знания иностранных языков. Банальное перечисление языков через запятую не подходит, работодателя интересует уровень владения каждым из языков. А поскольку знаю аж 4 языка (1 родной + 3 ин.), то это не так уж и просто.

Пока ничего, кроме матрицы вроде этой:

в голову ничего не пришло, но это очень скучное и убогое решение.

Не могли бы вы подсказать более изящный способ оформить данный блок?

Спасибо.

Здравствуйте, Артем.

Сейчас делаю макет сайта интернет-магазина аппаратов сотовой связи. Как бы я ни пытался представить товар на странице, у меня получается так, как это выполнено на сайте Евросети. Товар там представлен, на мой взгляд, идеально: изображение составляет 200 px в высоту, в среднем ширина телефона составляет ½ от высоты, т.е. 100 px — этого как раз хватает, чтобы расположить 4 аппарата плюс описание справа от него в ряд при разрешении 1280 px, не оставив и лишнего пикселя.

В тексте нет ни буллитов, ни сплошных и горизонтальных линий — ничего лишнего, — оно написано по-человечески. Я уже неделю пытаюсь сделать «не как у Евросети», дабы не получить упреков в плагиате в первую очередь от самого себя, но у меня ничего не получается. Единственное, что я сделал: использовал «вердану» в описании (так его стало легче читать), убрал кое-что из него, разбил текст на «порции». Размер изображения я посчитал оптимальным.

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

Добрый день, Артем.

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

Увидел схему на Амазоне. Как ее решить иначе? Сделать нагляднее?

Есть такая идея — местное редактирование данных: где смотрим, там и редактируем. Идея сначала была озвучена в одном из примеров JS-библиотеки script.aculo.us и развита в Rails-плагине SuperInplaceControls. Может быть, для других языков/фреймворков существуют аналоги, но я при описании буду опираться именно на этот плагин.

• Сейчас это работает так:
• 1) при создании страницы показывается текст со значением;
• 2) при щелчке по значению текст заменяется на элемент или группу элементов, в которых можно отредактировать значение, кнопку OK и ссылку Cancel;
• 3) при нажатии на кнопку или на ссылку текст отсылается аяксом на сервер, где сохраняется или откатывается к предыдущему значению. После обработки все эти элементы управления заменяются на текст со значением.

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

Сейчас мы (я и автор SuperInplaceControls) обсуждаем варианты улучшения плагина. Как вариант, мы обсуждаем клики по label для перехода в режим редактирования. В этом случае проблемы начинаются в случаях длинных описаний вместо коротких. Верстальщики, скорее всего, их поместят в p или span.

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

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

Что можете посоветовать? Какой из вариантов лучший, а про какие стоит забыть? До каких вариантов мы не додумались?

Артем! Товарищи!

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

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

1600×2264

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

Уважаемые советчики!

Задача: посетителям фитнес-клуба требуется инструмент подбора групповых занятий в свободное для посещений время.

Решает ли такой интерфейс задачу? Достаточно ли прозрачна логика работы?

Спасибо.

Здравствуйте, Артем.

Делаю макет, чтобы показать программистам сайта примерный интерфейс, который мы хотим видеть. Я не профессиональный дизайнер, а только лишь менеджер проекта, поэтому есть много вопросов, которые мне здесь никто не может разъяснить. В частности, самый большой по блоку поиска «Вы ищете ***** в ********». Будет ли он понятен посетителям? А если после «вы ищете…» выбран «готовый бизнес» (существует такой вариант) можно ли автоматически убирать «Аренда», оставляя только «Продажа»?

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

Вот, например, в Outlook есть возможность «перетащить» и-мейл в зону календаря, при этом появится диалог создания новой встречи. Однако: ни одного параметра из письма этот диалог не использует, как будто их вообще нельзя распознать!

Я бы хотел, как вариант, чтобы даты, дни недели и время в тексте письма были активными (слово «встреча» и подобные тоже могут форматироваться автоматически). Тогда бы при наведении курсора я бы мог прямо из письма назначать встречи. Или например: есть какая-то кнопка на панели инструментов, нажав на которую, я могу поднести курсор к дате и тогда назначить встречу. Что думаете? Как это еще можно реализовать?

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

В своей книге «Психбольница в руках пациентов» (в оригинале The Inmates Are Running the Asylum: Why High Tech Products Drive Us Crazy and How to  Restore the Sanity) Алан Купер пару раз неодобрительно высказывается о таком явлении, как файловая система в компьютерах: «Большинство продуктов конкурентов […] просто сбрасывали изображения в файловую систему, оставляя пользователя наедине с традиционной иерархией, позволяющей хранить и находить отсканированные изображения. Но этой файловой системой в действительности очень сложно пользоваться, она практически бесполезна».

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

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

Здравствуйте, Артем.

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

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

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

Применяется ли что-либо подобное у вас в бюро?

Привет, Артем.

Я каждый день еду на автобусе до работы и вижу у придорожных магазинчиков примерно такого содержания вывески: огромными буквами название (например «Аленький цветочек») и ниже в 3-5 раз меньшим шрифтом суть этого магазина — «продуктовый», «одежда» и так далее. Как ты считаешь, правильно ли это, и если можно, покажи пару примеров нормального на твой взгляд размещения информации на вывеске.

Добрый день.

Такой вопрос — существует ли научное или техническое обьяснение, в каком случае мы делаем кнопку «найти» после поля поиска, в каком случае иконку «enter», в каком случае мы ничего не делаем (подразумеваем, что и так поймут)?

В каком случае мы делаем пример поискового слова?

Или все на усмотрение дизайнера?

Здравствуйте, Артем! Удобна ли подобная форма авторизации и в какой мере?

Спасибо.

Цель — модернизировать вывод товара из каталога. Вывести только то, что действительно необходимо.

Если товар на складе — кнопка «купить». Если товар можно получить только через 1-3 дня — кнопка «заказать». Если товара нет, то — «нет в наличии». Цвета кнопок «купить», «заказать», «нет в наличии» будут разные.

Куда лучше впихнуть иконки с услугами? В серое поле в правом верхнем углу предполагаю поставить переход между другими разделами, КПК и т. п.

Здравствуйте, Артем.

Краткое описание: «Leo» — наиболее динамично развивающаяся автомобильная компания области. Компании принадлежит почти 30% рынка новых иномарок. MEGALEO — новый автосалон, где представлены модельные ряды десяти популярных брендов.

Цель: сделать главную страницу сайта, с которой можно будет попасть на интересующую марку автомобиля.

Проблема: столкнулся с проблемой размещения марок автомобиля. Пробовал вставлять логотипы. Но тогда страница превращается в «кашу».

Сейчас ссылки выглядят в виде тегов. Размер текста в ссылке пропорционален проценту проданных автомобилей конкретной марки от всех автомобилей.

Вопрос: как лучше действовать в подобных ситуациях?

Заранее благодарю и надеюсь на вашу помощь!

Это иллюстрация в книгу. Что с ней можно сделать?

Налаженный сбыт 36 филиалов: 33 на Украине, два в Казахстане, один в Молдавии. Плюс 156 авторизованных партнеров. Так теперь сбытовая сеть ТПК выглядит в цифрах. Чтобы ее построить, компании понадобилось 11 лет.
Источник: ТПК

Всем привет!
На картинке показана динамика развития сбытовой сети ТПК.

Это читабельная или нечитабельная иллюстрация? Заранее благодарю за толковые советы.

Аскольд Львов, ТПК

Здравствуйте, Артем. Была задача: сделать понятную, красивую промотаблицу. Интересно ваше мнение об этой работе. Мне сказали, что стало вообще «ни хрена не понятно». И что во всем этом теперь нужно разбираться минут 20, а то и 40. Спасибо.

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

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

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

Добрый день, Артем.

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

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

Посоветуйте, как лучше поступить? Может, нужно расположить как-то иначе?

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

Здравствуйте! Как и что можно сделать лучше?

Артем, здравствуйте!

Хотелось бы знать ваше мнение. На сайте даны фотография и слайдер — их расположение не должно меняться (кроме возможных сдвигов слайдера вниз- вверх в правом столбце). Нужно оформить слайдер. У него есть пять постоянных элементов: навигация по альбому, количество фото в альбоме, порядковый номер фотографии, название альбома и три превьюшки фотографий. Большинством был выбран вариант номер 1

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

В процессе работы над слайдером возник спор о параметрах превьюшек фотографий. Одна сторона за их стандартные размеры — 78×78 пикс., но при этом все фото не квадратного размера обрезаются, как у Flickr и fotki.yandex (см. вариант номер 4). Другая сторона за неизменный контент пользователя (т. е. не обрезать и не сводить в квадрат), за сохранение всего снимка, но в уменьшенном размере с единственным условием — ширина 78 пикс., т. е. высота превьюшки может варьироваться.

Большинство высказывалось за сохранение пропорций — отсюда сразу обозначились условия дизайна будущего слайдера. А какое ваше мнение в этом вопросе?

Попытался решить проблему размещения интернет-ссылок в печатных изданиях.

Я попытался улучшить схему офиса.

Артем, как бы ты решил поставленную задачу?

Здравствуйте, Артем.

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

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

Как, по вашему мнению, лучше всего реализовать выбор алгоритма работы с группой (отобразить список или работать с группой)?

Здравствуйте!

В нашем доме сейчас проходит ремонт: этажи красят свежей краской. Работники-гастарбайтеры везде понавесили надписи «Осторожно окрашено» — разумеется, без запятой. В связи с этим я задался идеей придумать знак, понятный людям всех национальностей без слов. Валик символизирует сам процесс окраски, капли — свежую краску, восклицательный знак — «Осторожно, опасность». Что можно упростить, исправить, доделать?

Заранее спасибо.

Привет. На странице есть порядка 10-ти ссылок на PDF файлы (других типов файлов не предусматривается). Как можно указать, что все это — PDF, не ставя иконку у каждой ссылки или просто подпись?

Здравствуйте, Артем.

Это три последовательных экрана программы ТеРеМОК для теплотехнических расчетов многослойных ограждающих конструкций. Цель пользователя — либо определить толщину утеплителя в конструкции, либо проверить конструкцию на соответствие строительным нормам.

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

В действии можно посмотреть — не требуется установка.

Заранее благодарю.

Для отображения рейтинга (чего угодно) обычно используются звезды. Можно ли сказать, что это стандарт де-факто и нужно ему следовать? Проблема в том, что звезды не очень наглядны и любое их количество воспринимается положительно, хотя, например, 1 или 2 звезды = «плохо», но выглядит лучше, чем их полное отсутствие (нет оценки). А вы что думаете?

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

Приемлемо ли нумерацию ставить слева от заголовков (пример Б)? Не потребуется никакого лишнего оформления и все так же ясно и понятно.

Артем, скажите, какое, по вашему мнению, самое лучшее решение для страницы faq?

Здравствуйте, Артем!

Хочется узнать ваше мнение по поводу моей дипломной работы. Задача такова — сделать на сайте моего факультета расписание.

Основная цель для меня — это добиться максимальной простоты и удобства использования расписания: 1. Пользователям будет легко найти свое расписание; 2. Администратору — удобно и быстро его заполнять.

Заранее спасибо.

P. S. Был на вашем трехдневном курсе в Киеве (август 2007 года). Очень понравилось, надеюсь, что в этой работе я применил полученные знания по максимуму :)

Добрый день, Артем.

Форма поиска квартир в новостройках. Задача — максимально упростить ее.

Количество комнат и выбор района — замена стандартным radio-button. Бегунки — полям ввода «от» — «до».

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

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

Поставит любого редактора в тупик. Надо будет ему сначала прочитать статью, узнать, чем там дело кончилось и только потом подобрать правильное слово для ссылки. Так он даже дня не выдержит и вычленение ключевых слов будет регулироваться шаблонами его мышления. Поэтому в заголовке «В музее восковых фигур разбился бюст Анны Семенович» он недолго думая выделит «бюст Анны Семенович».

P. S. Впервые обратив внимание на данную проблему, я отправил пример с решением Великому Линчевателю. Однако прошел год и ответа нет. Может, думает. Может, сам себя боится.

Пример страницы с блочными ссылками

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

Пока в голову пришло два варианта.

Вариант 1 (верхняя схема)

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

Вариант 2 (нижняя схема)

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

Что скажете?

Сделал концепт многоцелевого пульта управления с 2-мя сенсорными OLED-панелями. По задумке этим пультом можно управлять всеми домашними или даже производственными устройствами. Интерфейс пульта меняется в зависимости от выбранного устройства, или же при входе в отдельную ветку интерфеса (вроде настроек на ТВ). Управление составом устройств велся бы через подключение к ПК.

Как оцениваете жизнеспособность? Есть ли будущее или громоздкие пульты систем «Умный дом» лучше?

Здравствуйте!

Хотелось бы услышать ваше мнение об этих кнопках. Я программист в команде, которая делает определенный сайт. Есть отдельный человек, позиционирующий себя как «информационный дизайнер», он сделал вот эти вот кнопки. Возможно, тут все сильно зависит от контекста, но на сайте нет больше никаких объемных элементов. У большинства людей стойкое чувство, что с кнопками что-то не то. (И это даже не связано с кадром «вжатия» кнопки).

Вообще насколько правильно в интерфейсах использовать вот такую вот «объемность»? Создается впечатление, что на сайт смотрят как бы не сверху вниз, а откуда-то снизу справа, причем только на кнопки.

Здравствуйте, Артем!

Я делаю инфографику для «Русского Репортера». Насколько удачно получилась эта карта? Что можно было бы улучшить?

Спасибо.

Дорогой Артем!

Хочу задать вам вопрос об устройстве Эмгизмо. Скажите, если у пользователя одна из клавиатурных раскладок — французская или итальянская — как ему узнать французский флаг по его вертикальному отрезу? Это же будет просто синяя полоса. Я знаю точно, что французская раскладка существует и отличается от английской. Кроме того, раскладок не всегда бывает ровно две, а у вас больше не помещается.

С другой стороны, у вас есть интересная идея про цвет кнопок, зависящий от раскладки.

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

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

Что вы думаете?

Кроме всего прочего, надо было оформить форму для ввода и форматирования текста. Все как обычно: выделить текст полужирным, курсивом или подчеркнуть. Ну, еще сделать текст мигающим.

• Я предложил простой подход, который и показан на картинке. На это получил ответ (цитирую):
• «…Что за word кнопки жкчм — ну офис же полный…»;
• «Нет. Так не надо. Жкчм можно сделать по-человечески в столбик: выделить жирным, слово наклонить, подчеркнуть, мигание»;
• «Нет. Это не дизайн. Мы разрабатываем ахеренную систему, инструмент, которым пользоваться должно быть и приятно, и понятно, и глаз радовать. — сейчас же перспектива того, что с word-файла сотрудник компании продолжит такую же рутинную работу и на нашем сайте. Нет. Так не должно быть. Где полет идей, фантазии?».

На этом наше сотрудничество завершилось.

Неужели для оформления простой формы для набора форматированного текста надо что-то изобретать «креативное»? Или же на самом деле есть лучшее решение?