Pull to refresh

Comments 48

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

2) тэги на диске?)) бросьте эту затею. Я никогда бы не стал пользоваться облаком тэгов при навигации на диске

3) картинки одинаковые, а должны хотя бы как-то асоциироваться с разделом.
:) Спасибо за комментарии, отвечу между строк.

1) там нет дизайна окон, вообще-то. Это то, как приложение выглядит при запуске со включенным Aero в Windows 7. Там справа вверху висит пара кнопок, но они к делу отношения не имеют — это внутренняя программа.
Я тоже против собственного дизайна окон в таких ситуациях.
2) а почему? Собственно, это и я слышал, что тэги — это очень сложно. Но… там слишком много контента. Ок,

тэги -1
3) тут да, проблемно. Дело в том, что контента много, а денег на то, чтобы сделать специальные картинки для каждого элемента списка, не было. Но идея разумная.

иконки -1

Спасибо!
Левая колонка: меню никак не отличается от списка ссылок и контактов. Где я сейчас нахожусь — не ясно. Серый унылый фон всего окна, картинки эти ужасные вместо иконок (лучше уж вообще убрать), модульная сетка отсутствует (достаточно посмотреть на отступы между элементами чтобы это заметить) и т.д. и т.п. Такие штуки можно сделать гораздо более качественно.
спасибо за комментарии и feedback.

серый унылый фон — это не проблема, он все равно будем другой у нового диска. Уберем! :)

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

1) Может быть, убрать тэги, и сделать вместо них список продуктов по алфавиту?
.NET
SharePoint
Silverlight
Visual Studio…

2) Либо убирать раздел «все разделы», либо показывать, что он выбран.

3) С «Отправить» тоже как-то странно. Вот если мы сейчас ее нажмем, на главной странице — какие ссылки отправятся? Не очень понятно.
1)
длинно получалось в оригинальном дизайне. Но мысль в конкретной ситуации логичная…

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

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

Ну а вообще же — у вас ведь в плане дизайна вроде есть вандерман, а также студия лебедева в горячем резерве? ;)
нет у меня Вундермана, есть Логрус :(

кнопку клеить везде не хотелось… в любом случае, в новом диске кнопки не будет

Такой вариант я использовал на Http://www.devdays.ru/ года полтора назад, кстати.
Как сайты года 98. Без обид :)

1. Убрать эти выпуклости.
2. Как выше сказали серый фон здесь не нужен.
3. Блок с разделами должен отличатся от всего остального. Ведь это как я понимаю основная навигация на диске. Все остальное можно делать менее активным
4. Теги на диске, правильно сказали, не нужны. Лучше уж тогда поиск.
5. Иконки лучше уникальные делать к каждому из пунктов.
6. Выделенный пункт это то что подчеркнуто? Я почему-то сразу подумал что это при наведении. Лучше как-то иначе выделять.
1)
Ок
2)
да, но это легко меняется и оно различно для разных дисков. Учтем.
3)
да, это уже было упомянуто выше.
4)
поиск организовывать с помощью Javascript, xml и все? мне казалось, что проще сделать теги, чем заморачиваться с поиском.

вариант со списком продуктом мне кажется предпочтительнее…
5)
это логично. идея хорошая, но не уверен, что ее легко будет в новой версии диска имплементировать.
6)
да, по умолчанию при открытии оболочки диска выделяется первый элемент. А как лучше выделить?

Спасибо!
В зависимости уже от того как вы переделаете меню.

Варианты:
1. Цвет
2. Слева точечка другого цвета
3. Фон. примерно как тут (http://farm3.static.flickr.com/2194/2492207808_2a5eea7e30.jpg)
4. Сделать жирным

Поиск:

ну если сильно не хотите заморачиваться, то можете попробовать сделать такую штуку http://rikrikrik.com/jquery/quicksearch/#examples. Если правильно написать css и изменить чутка js, то можно сделать что-то подобие автокомплита. вывести все материалы в UL. И просто при наборе показывать их.

Но это как вариант.

хм. все-таки поиск мне представляется плохой идеей, честно говоря. А почему теги вам так не нравятся? Ведь они дают наглядное представление всего контента в миниатюре.

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

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

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

Ну не знаю. Может теги это и круто. Но не для диска, ИМХО.

Неужели в Майкрософт нет GUI как примерно должен выглядеть диск.

Я уверен, что если вы подумаете, то можно придумать решение функциональнее тегов на диске.

Разбивать диск на 4 из-за огромного количества тегов я считаю нецелесообразным. Человеком руководит лень. И моя бы лень задала мне вопрос, а ты точно помнишь, что тот материал который тебе нужен на 3 диске, а не на втором. И что следующий материал на этом диске, а не на следующем. Если я хочу получить диск материалами конференции, то хочу получить один диск, где я буду ориентироваться как и где мне найти быстро нужную мне тему. Но переставлять 4 диска ради одного-двух докладов я бы не стал. Мне было бы проще скачать тогда где-нибудь.
По мне бы —
1) открывать это все в браузере.
2) Насколько я понимаю — тут фреймы используются (мы в каком веке?) ;)
3) интерфейс тоже как будто диск куплен на рынке за 100 рублей «Разные программы» — отпугивает как то серый фон. Я не дизайнер, но мне нравится оформление у Visual Studio 2010 and .NET Framework 4 Training Kit(Минималистский и со вкусом):
1)
я как раз был против браузера. Потому что у нас оно не работало в одном из браузеров тогда, два года назад, а при использовании DHTML (а это DHTML-приложение, вообще говоря) используется движок Trident (IE) принудительно, благодаря чему удалось избежать необходимости тестировать для работы странички на нескольких браузерах (мы бы не уложились в смету).
а почему лучше делать это в браузере?
2)
нету фреймов, есть DHTML, см выше
3)
насчет серого фона согласен.
На кит посмотрю, но пока он мне не очень нравится — нет ощущения целостности и доступности ВСЕГО контента…

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

Это экономия денег, проще говоря.
так ведь как раз экономия и получается за счет того, что все делается для одного браузера. Сделать из простого HTML DHTML-приложение — тривиальная задача.

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

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

1) ужасные огромные картинки вместе с неоправданно большим шрифтом делает страницы очень громоздкими — начальная у меня заняла 4 экрана.
2) теги. извините, но имхо, это не то что стоит переносить с веб 2.0 в обычные приложения, а тем более в оболочку диска.
3) представление разделов. почему список разделов начинается пунктом «Все разделы»? имхо, стоит заменить бесполезную надпись «Разделы» этим пунктом — получится что-то типа иерархии.
4) описание каждого пункта. зачем в каждом пункте списка материалов указание какой это раздел, ссылки, теги да ещё и таким большим шрифтом? при этом, собственно описание пункта — небольшая строчка. имхо, стоит сгруппировать пункты относящиеся к одному разделу и выделить их, например, одним оттенком фона или ещё как-то; теги — смотреть пункт 2; ссылки — смотря какое отношение они имеют к материалу, но лучшим решением было-бы показывать их уже в самом материале, ведь если я не интересуюсь данным пунктом, зачем мне видеть ссылки?, а если и интересуюсь, то думаете я буду лезть в интернет, чтобы узнать что там, не заглядывая в сам материал?
5) большая _розовая_ кнопка «Отправить». вообще не понятно зачем так акцентировать на ней внимание — неужели это так важно, отправить ссылку своему другу? наверное, стоит сделать её менее контрастной к фону, и перенести, например, вниз страницы — всё-таки у большинства именно после прочтения появляется желание поделится ссылкой, а не до него, правда?

кажется всё. =) удачи!

P.S. не воспринимайте критику слишком серьёзно — зачастую критикующие не имеют представления о причинах того или иного выбора разработчика, а просто видят результат который им не нравится.
1)
размеры — ок, учтем.
2)
почему? а как лучше?
3)
ну… если делать как именно иерархию, то да. Я так сделал, потому что надписи «Разделы», «Теги» не явлюятся кликабельными и было бы inconsistent делать так, как вы говорите. Но в случае со специальной стилизацией под «дерево», это может быть удачным ходом.

спасибо!
4)
с группировкой и прочим была проблема — отсутствие бюджета. Практически переделки были один только раз, в тот, когда делался этот диск — ReMIX 2008. В этот раз у меня опять плохо с бюджетом :( Как всегда = хотят конфетку, и забесплатно.
Кстати, по поводу дизайна… я придумал Layout, а сетку и картинки, фоны предложили дизайнеры, а не я.
5)
согласен насчет того, что кнопку, возможно, слишком сильно выделили. Приму к сведению! :)

и вам тоже большое спасибо за комментарии!!!
2) потому, что обычно, теги это то, что пользователь может выставить сам и каждый из тегов понятен и приемлем для него, а тут большинство тегов — ваше имхо и «значимость» (размер относительно других тегов) тоже.
также, теги позволяют систематизировать данные по каким-то признакам, тут же, если убрать некоторые не слишком информативные (например, «Product» или «Video» — первые вообще, как-то слишком общий, второй же не юзаемый — если вам надо информация, сомневаюсь, что наличие видео это тот критерий по какому вы будете её искать) останется не так много тегов из серии «Silverlight», ".NET", «Visual Studio» которые, в принципе, можно подать просто как список технологий и инструментов.

4) понимаю. такое часто бывает.
а дизайнеры у вас, честно сказать, не очень — покажите им этот топик, пусть им будет стыдно =)

и не стоит благодарностей, критиковать нас учат с детства, это проще чем самим что-то сделать — менталитет такой.
2)
а это рациональные доводы. Согласен насчет того, что теги выставлены мною, а не с точки зрения пользователей. С другой стороны, в блоге теги выставляет оунер блога, что скажете?
:)

4) хорошо, покажу :)

вообще мне кажется, что если люди все же дали свои комментарии, то им за это спасибо. Простая вежливость! :)
2) да автор ставит собственные метки топику, но согласитесь что есть два типа тегов — общие (такие как «php», «linux», «django» и пр. которые можно использовать для навигации) и собственные (типа метки «диск» у данного топика — мало кто будет искать топики по этой метке, она не является достаточно информативной для поиска). так вот, в данном диске, если убрать ваши «собственные» теги, все остальные можно подать, как я писал выше, в виде списка, который будет более удобен (нет разницы в размерах шрифта, всё чётко рассортировано) и более понятен. как-то так.

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

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

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

Профессиональные методы — да, в США легко. Usability Study, штатные UX Designers и т.д. К сожалению, здесь, в Москве, у Microsoft всего этого нет. И времени нет, чтобы заказать Usability Study или создание дизайна диска у тех же Usability Lab. Банально просто :(

Поэтому обычно делается все своими силами.

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

Вот…
Ах да, если докладов многовато, можно добавить поиск: по мере набора букв в списке остаются только доклады в тексте и заголовки которых есть искомые буквы. Естественно, поиск работает даже если немного опечататься.
p.s. Структуру файлов на диске советую сделать так, чтобы все файлы можно было посмотреть без запуска оболочки (например проиграть видео лббым проигрывателем), иногда так удобнее.
это мы всегда учитываем, спасибо за комментарий!
А ведь это великолепно!!! Просто и наглядно, мне очень понравилось.

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

Да, не очень согласен насчет страницы для каждого доклада. ИМХО лучше сделать список в один клик?
> Интересно, сколько времени и денег потребуется потратить, чтобы сделать такой интерфейс силами нашего Логруса.

Не знаю, по моему верстка тут элементарная :) На фрилансе такое разверстают за 2 часа и отзыв, правда не знаю как насчет качества.

А вообще, на будущее — если не знаете, как что-то оформить, используйте стандартные средства, например скопируйте оформление проводника (есс-но, убрав оттуда все ненужные функции), панели управления или сайта майкрософт :)

> Да, не очень согласен насчет страницы для каждого доклада. ИМХО лучше сделать список в один клик?

Смотрите, если один доклад — это просто файл/видео/презентация, тогда, конечно, делайте заголовок и сниппет ссылкой для запуска/проигрывания/скачивания.

Отдельной страницей стоит делать, если например к каждому докладу прилагается текст, файлы, какие-то комментарии и т.д.
Слушайте, ну так же нельзя!
Всё-таки работа в Windows напрочь убивает вкус.
Что конкретно «нельзя так»?
У всего, что вы рисуете, должен быть какой-то смысл. А всё, что можно выкинуть, надо выкинуть. Если Вы не профессиональный дизайнер. Тем можно добавлять дополнительные смыслы — придумывать casual attractive всякий. У них работа такая.

Сверстайте эту информацию как если бы Вы верстали хороший бумажный журнал. Три колонки на белом фоне. Не ссыте сделать левую колонку пошире! Если информация достойна вынесения на первый экран, у неё должно быть и достойное пространство.

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

Любимая тема Microsoft — «уж если мы заказываем удобочитаемые экранные шрифты лучшим в мире тайп-дизайнерам, так давайте сделаем их такими мелкими, насколько это возможно». Эй, у вас всё равно экран с прокруткой, сделайте вы им нормальный кегль, пусть они читаются совсем без напряга.

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

Лучше всего читаются чёрные буквы на белом фоне. А ссылки должны быть синими и подчеркнутыми.

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

Кстати, указания про теги — фигня, теги и всё что угодно можно оставить как раз если они уместны. Это всё религиозные споры.
Покритикуете тогда мой вариант? ))

habrahabr.ru/blogs/ui_design_and_usability/67262/#comment_1900933
Ну это существенно лучше, + такая неплохая попытка «продать» при помощи выносных комментариев :)

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

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

> Если бы я вёл этот проект, я бы бы его одобрил после решения проблемы с меню в правой колонке, сейчас оно как-то жопно там прилеплено, не на своём месте

Точно, вы правы, у меня в редакторе оно просто прикреплено к гайду, а на готовой картинке этого гайда нет, и оно как то само по себе висит :((

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

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

«Пятиколонник» — подозреваю, относится к способу, когда страницу делят а N колонок и строят блоки по ним? Я просто включил сетку и выравнивал границы текста по ней, и вообще я думал колонки применяют только в газетах и на порталах эпохи Web 1.0, в конце концов откуда мне знать)

p.s. А тахома все таки беспроигрышный шрифт, да?))
>> p.s. А тахома все таки беспроигрышный шрифт, да?))

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

А, «ёлки» ещё по правому краю дебильные какие-то, не надо их совсем, не нужны они.

Ну и немного позарубался бы на тему того что шестиколонник тут лишний и ни к чему, вполне можно обойтись пятиколонником, но это от сроков и вменяемости дизайнера зависит, если времени нет на перевёрстку или человек проблемный, наплевал бы.
действительно, покритикуйте, пожалуйста! выглядит очень даже позитивно :)
Убрать псевдо 3d кнопки и остальное.
Фон белый, шрифт сделать гораздо крупнее. Сделать веб 2.0 кнопочки
Правая колонка могла быть и поуже, поэтому левая может быть и пошире и поэтому там можно увеличить шрифт. Ссылки подчеркнуть.
Полезные ссылки(и другие внешние ссылки) должны открываться в дефолтном браузере, а не в Эксплорере.
Добавить внизу под статьями: статьи близкие по теме.
в этом не нравится мрачная расцветка
обожаю оформление дисков Игромании
Я бы предложил такой вариант (сделан на скорую руку):


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

При предложенной мной схеме человек сразу видит разделы, а потом выбрав соответствующий своим интересам идет знакомиться с нужной тематикой.
Sign up to leave a comment.

Articles