Pull to refresh

Comments 74

Статья про интерфейсы без единой иллюстрации?
Зато много ссылок на другие страницы, а на них уже иллюстрации :)
Забыл прокомментировать — обновил статью, добавил картинки.
Статья не про сам Metro, а про целесообразность его использования в веб-интерфейсах. Картинок много по ссылкам, которые я привел в статье, не вижу смысла их дублировать.
На демо-сайте я не увидел метро ui. Видимо стоило сюда добавить картинок. Может все смотрят не на то, что вы хотели?
Мне нравятся сайты в metro-стиле. Минималистическое оформление не отвлекает от содержания. Половина успеха, на мой взгляд, обеспечивается из-за новизны, что-то новое и оригинальное притягивает. Вторая половина, конечно, правильная раскрутка. Были ведь похожие сайты, или другие с не менее интересными идеями, но они не создали массовое подражание. Рад за Microsoft, после долгой спячки с заметным опозданием начали заниматься своим имиджем, Делать новые продукты, выходить на новые рынки (в первую очередь имею в виду мобильный).
Как глоток свежего воздуха после интерфейса битрикса
Последний скриншот практически Gmail.
Зачем кстати модальное окно такое широкое? Там внизу поле на тысячу пикселей в длину?
В модальном окне изменения объекта могут быть не только input-ы, но и поля типа «текст», со встроенной панелькой форматирования. Согласитесь, таким полям нужен простор :)
Когда они есть, конечно, нужно больше места. Но когда их нет, то такое окошко смотрится очень громоздко.
Меня также несколько смутила кнопка «Закрыть» в правом верхнем углу экрана — в окне есть еще кнопка «Отмена» и в чем их разница непонятно. Если они выполняют одну функцию, то и названия, по моему мнению, стоит использовать и те же.
мб «Отмена» это сброс введенных значений?
Мы на эту тему тоже сомневались, но решили сделать так. Логика такова примерно та же, что и у окон Windows. Элемент «крестик» — это закрытие окна, а не отмена. Ведь в окне может быть не форма, а просто алерт. Крестик нужен вне зависимости от наличия внизу тех или иных кнопок. А вот кнопка внизу означает «закрыть окно без сохранения измененных данных». Но это очень длинно. Просто «закрыть» может ввести пользователя в заблуждение — а вдруг данные сохранятся? Поэтому дублирование операций разными словами на мой взгляд здесь оправданно.
Не очень хорошая идея перекладывать в интерфейсе информацию с визуальных элементов на текстовые.

Как не странно, но старый вариант интерфейса, более удобен и если бы провести сравнительные тесты, то, скорее всего, окажется, что скорость работы в старом интерфейсе выше, даже для новых пользователей.
Мы проводили сравнение нового и старого интерфейса по модели GOMS, хуже не стало ни в одном из примеров, а в некоторых типовых операциях прирост очень значительный. Здесь netcat.ru/about/ncblog/netcat5.html есть видео презентации NetCat 5, перемотайте на 27:30, там есть табличка.
Спасибо, за ссылку на видео. Что касается GOMS, то, насколько я понимаю, модель расчетная, т.е. опирается не на наблюдение за реальным пользователем, а на некие абстрактные операции. Верю, что при моделирование вы получили более высокую скорость для набора типовых операций, но я так же вижу, что проверялись только несколько операций, подозреваю, что сама модель была очень ограничена.

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

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

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

Я пока склоняюсь к мнению, что основной идеей Metro стало удаление дизайнера из процесса создания продукта. Хороших дизайнеров, способных делать интерфейсы в полном соответствии с идеологией Apple очень мало, а вот сделать что-то по принципам Metro гораздо проще и таких специалистов будет, как минимум, на порядок больше (отличные дизайнеры + просто хорошие дизайнеры + UX/ UI проектировщики). В итоге, стратегически с новыми принципами интерфейса Microsoft может получить значительный прирост разработчиков, программ, идей – ради этого приходиться чем-то жертвовать.
что основной идеей Metro стало удаление дизайнера из процесса создания продукта

Обманчивая простота. Это уж точно не было основной идеей, т.к. сделать хороший Metro дизайн ничуть не легче, чем сквеморфичный. Пример см. в топике :)
Скажем, если хороший проектировщик будет делать приложение, то он может, использую стандартные паттерны, полностью закрыть тему UI и это будет выглядеть как хороший законченный продукт в стиле Metro, если же так делать что-то для Apple, то это будет выглядеть как прототип.
Ничего подобного. Вы, видимо, считаете, что дизайнер — тот, кто рисует иконки и уголки. Для того, чтобы удобно и логично выстроить контент в Метро стиле нужно приложить немало усилий.

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

Не так много сразу понятных и однозначных знаков. И зачастую, пользователь сначала рассматривает иконку, а затем читает подпись, что же она делает, и только потом жмет
Представьте, что на дороге все знаки заменили текстом – насколько снизится скорость вождения? Это крайность, но хорошо иллюстрирует разницу между текстом и знаком.
Это один край крайности. Дорожные знаки учат и запоминают несколько месяцев (а кто-то и лет). И если вы вдруг, например в Зимбабве, встретите сиреневый ромб на голубом квадрате, то без надписи никогда не догадаетесь что он обозначает.
Да дискета, как правило обозначает сохранить, но вот крестик уже у кого-то означает удалить, у кого-то закрыть, а у кого-то очистить.
Если человек работает с программой постоянно, 9 часов в сутки, 5 дней в неделю, то да — он знает, что вот эта спиралька означает экспорт, а вот эта молния отправить нотифай. И все надписи рядом с ними будут его только отвлекать. А если он работает с программой от случая к случаю, периодически, то он каждый раз будет тормозить и каждый раз наводить мышку на иконку, чтобы увидеть что это такое.
Даже если он работает сутками, все равно путается в иконках.
Скажу честно, старый интерфейс был удобнее и к тому же нормально работал на айпаде. Работать же на айпаде над 5 версией Нетката уже не представляется возможным.

Ну и плюс куча недоделок 5 версии заставляют меня сожалеть, о том что выбрал 5 для двух новых проектов. Последующие будут на 4.7
Гм. Вы первый с подобной претензией на тему iPad. У нас ровно противоположные наблюдения: на версии 4 на планшетах (в т.ч. айПад) было работать сложно, а пятую версию мы адаптировали под планшеты и, разумеется, тестировали на iPad-ах. Напишите пожалуйста на info@netcat.ru примеры, что раньше работало, а что нет. Насчет недоделок — вы обновлялись до 5.01?
Планируем на этих выходных, что бы если что-то полетит, быстренько откатиться :)
Ок, напишу в почту по поводу айпада.
Да, если отталкиваться от стиля который исповедует Microsoft. А если глянуть на истоки Metro UI, то можно понять что этот стиль прежде все выражен в:
— отсутствии теней, текстур и прочих элементов для создания псевдообъема, имитации материалов из физического мира и т.д.
— широкое использование иконографики
— типографика выносится на первый план (как и во всех минималистичных стилях)

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

А закругленные углы или нет — не существенно. Как-то так в двух словах ).
MetroUI красиво и приятно, но главной чтоб работало все корректно. Работы еще у вас очень много, не останавливайтесь! Ждем новых релизов.
Кстати, да. Обнаружить удалось только модное слово в заголовке статьи. Ну и шапку, получилось реализовать.
Ещё порадовала и «ограниченность HTML» Сразу что-то про танцоров вспоминается… :)
Оставлю пару ссылок, для контраста:
www.mykindofphone.com
www.computerman.gr/en
и даже:
demos.seekerlabs.com/wordpress/metropress
www.shape5.com/demo/index.php?metro_shows

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

Кстати, на первых двух сайтах есть серьезные косяки, как идеологические, так и в реализации. Если хотите, напишу.
Все что я заметил, так это то, что кнопки отдаленно(!) похожи на стиль Metro. Все остальное это Ваши выдумки. Если бы вы не сказали что дизайн выполнен в стиле Metro, никто о нем бы и не вспомнил в топике.
Видимо, у нас с Вами разночтения. Метро — это не внешний вид кнопок или других управляющих элементов. Я как раз и пытался в статье показать, что скопировать внешний вид элементов недостаточно. Я воспринимаю Метро как философию (как бы это пафосно ни звучало), в духе которой мы меняем интерфейс. Хорошо ли, плохо ли получилось — мнения могут быть разные (и мне в первую очередь интересны мнения тех, кто считает, что плохо). Задачи «сделать все элементы, как в гайдлайне Windows Phone» у нас не стояло. Иными словами, для меня Метро — это в первую очередь принцип взаимодействия пользователя с программой, а только потом графическая реализация. Не согласны?
Естественно разные (моё глубокое imho).
Парадигма Metro — immersive (погружение). Если можно так выразится: его стихия это полноэкранная работа над конкретной задачей. А не набор цветных кнопочек, рюшечек свистелок и т.д. интерфейса (о чём вам тёма и сказал, что "… вышло только верхнее меню"). Выбрав конкретную задачу вы полность работаете только с ней. При этом вам доступны действия только в контексте текущей задачи. Небольшой и простенький пример галерея: www.glorm.com/themes/color-grids. Попав в конкретную ветку вы можете или посмотреть её или вернуться на уровень выше, но не все 33 удовольствия.
Парадигма новая, необычная. Очень удобная на планшетах/телефона. Как будет чувствовать себя на на десктопах — пока сложно сказать. Пару знакомых жаловались поначалу на непривычность. Затем во новая парадигма им начала нравится, когда отсутствует куча ненужного цветного визуального мусора в виде меню/иконок/кнопок на экране. Например вы пишите текст, а у вас перед глазами висит море инструментов по его форматированию/выделению/Start/таскбар/докбар/… Не отсюда ли у хрома такая популярность?
Пример далеко не самый лучший.
Не вижу схожести интерфейсов Google и Microsoft. Посмотрите на Android и WP8 или на Gmail и Outlook.com Ничего общего, на мой взгляд…
А админка у вас скорее ближе к Google-подходу + отсебятина, чем к MetroUI. В метро нет такого «разнообразия» иконок и шрифтовых решений, там все квадратиш, практиш, «гуд»
Я не говорю про Андроид, а вот почта, документы, сайты — везде Гугл идет по пути упрощения, например, графическая реализация управляющих элементов, их количество. В Аутлуке по-другому реализована навигация, но что с того? Общее направление — упрощение. На мой взгляд, конечно. Мы не стремились повторить новый Аутлук (тем более что его еще не было, когда мы начинали работу), мы старались применить принципы Metro к уже имеющейся парадигме админки: фактически ее структура и принцип навигации почти не изменились. Соответствие принципам той или иной парадигмы — вопрос оценочный, спорить не буду.
Вам же темка ответил, что не дотянули до полностью metro
Интерфейс удался, но только наполовину. Есть куча недочетов касательно общего юзабилити и консистентности подачи материала.

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

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

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

И тогда не возникал бы вопрос об акценте на кнопке.
Давайте уточним про «просмотр и редактирование данных». Не просто абстрактных данных, а именно настроек. И это важное уточнение. Возьмите любую программу: Ворд, браузеры, Фотошоп. Нигде нет отдельного окна с информацией о настройках, везде открываются именно формы. Разбрасывание полей формы по табам 100% лучше большой простыни: настроек много, большинство из них нужны крайне редко, выводить все в куче — плохо. А разделяя на тематические табы (SEO, дизайн) мы помогаем пользователю не тратить время. Он же заранее знает, какие именно настройки он хочет посмотреть/изменить.
Вы приводите мне в пример интерфейсы, которые родом с прошлого тысячелетия.

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

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

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

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


Это же элементарно, Ватсон!

Гм. У нас в 4 версии была подобная (не по верстке, а по содержанию) вкладка «Информация», мы ее убили. Пока ничего писать не буду, надо подумать и обсудить :) Есть плюсы, есть и минусы.
Минусов не вижу. Одни плюсы. В одном месте полностью сориентировался, какие текущие настройки, и куда нажимать, чтобы изменить конкретные вещи. Дальше можно отсылать пользователя на определенный таб уже существующего интерфейса. Позитивно то, что в одном месте собраны все типы доступных настроек, не нужно гадать, про что идет речь во вкладке «Дизайн» и что я там смогу подправить.

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

Добавьте только самое необходимое, сделайте подачу информации лаконичной и удобоваримой. Не пытайтесь на плашки засунуть все, что только есть в табах, экспериментируйте.
Там стратегия юзабилити. Где должен быть таб (она же плашка), где контекст. Это понимается на подсознательном уровне, замечу, если грамотно сделано. Если не правильно, то конечно же будет полный бардак
Да, так гораздо лучше. И самое главное более понятливо.
Это только решение одной из многих проблем… :)
Да, самое главное логика и стратегия интерфейса metro w8 ui, а не плашки
> Зачем вводить в виртуальную среду чуждые ей элементы реального мира, не несущие никакой функциональности?

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

Старая админка никогда не станет настоящим Метро-приложением, как китайский Айфон никогда не станет настоящим Айфоном.

Для настоящего Метро-приложения нужно весь интерфейс с нуля проектировать, а не менять отступы, иконки и цвета. Конечно, потеряете на этом часть лояльных пользователей, как Микрософт. Ну и хрен с ними — не в деньгах счастье!
Кстати, забавный факт заметил недавно: если взять Twitter Bootstrap (который ни сколько не metro) и открыть в IE8 (не больше), внезапно обнаруживаем, что никаких закруглений и градиентов нет и всё очень даже metro!
UFO just landed and posted this here
Sign up to leave a comment.

Articles