«Любимый смартфон химика-технолога» или унификация рабочего стола вашего гаджета



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

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

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

    А усли у вас серьезный проект, то наша команда готова развернуть дизайн-систему внутри организации на базе наших наработок и подогнать под конкретные задачи, используя Figma. Web / desktop, так и любой мобайл. С React / React Native мы тоже знакомы. Пишите в Т: @kamushken


    Преамбула


    Однажды, в потаённых подпапках своей рабочей папки я наткнулся на несколько скриншотов полутрагодовалой давности. Это был достаточно “свежий” для меня и поныне будоражащий мой ум подход к разработке интерфейса, когда я за основу взял концепцию периодической таблицы Менделеева!

    (для тех, кто подзабыл)

    Тогда, находясь в каком-то умопомрачительном творческом порыве я “натянул” Менделеевское изобретение на концепт интерфейса, который должен был быстро решать одну специфичную проблему: между какими серверами Microsoft Lync случился лаг, который привёл к ухудшению качества связи или привёл к обрыву.

    Если не вдаваться сильно в технические детали (собственно и не буду рисковать попыткой, ибо точно совру), то для вышеупомянутого продукта существует несколько типов серверов: SQL, Mediadion, FrontEnd и Edge. Все они хитро сплетены воедино, чтобы предоставить услугу внутрикорпоративных аудио/видео звонков и чата.

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


    Каждая организация занимала своё пространство на сетке. Для каждой их них могло существовать разное количество серверов определённого типа, которые “налипали” упорядоченно каждый со своей стороны:

    (Например SQL сервера всегда находились на верхней грани, все mediation шли всегда по левой грани и т.д.)

    В верхнем правом углу отображался пинг до сервера. Причём более интенсивный зелёный цвет говорил о хорошем отклике и становился блеклым по мере роста. Условная градация была таковой:


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


    Разумеется проблема могла возникнуть и между серверами, которые располагались по разным граням блока организации. Тогда один мог временно “перепрыгнуть” к другому:

    (Перепрыгнула и показывает “разрыв связи” между SQL и FrontEnd’ом)

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






    Было теоретически достигнуто две цели: А — решалась проблема, Б — была отрисована стильная “обёртка”, которую легче продать. Жаль, но на этом повествование о конкретном продукте придётся прекратить. Руководство проекта в те далёкие дни в последствии переключилось на другие задачи и цели и концепт не вышел за его рамки.
    Даже не так интересно, описывать концепт, где не продумано дальнейшее взаимодействие… Я бы конкретно оторвался тогда :) Но интереснее переместиться ближе к делу…

    Амбула (оказывается нет такого слова, но есть фабула): таблицы


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

    Карточки


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


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

    В итоге получаем вот такое подобие эволюции таблицы на экраны своих гаджетов:


    В начале этой статьи я обещал вам новый “соус”. Я не стану вас обманывать. Итак…

    Любимый смартфон химика-технолога


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

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

    Тогда это стало бы выглядеть как-то так:

    (Вот вам первый этап эксперимента: сможете быстро, к примеру Whatsapp найти?)

    Немного скучновато, не правда ли? Ну ровно настолько скучновато, насколько вышел iOS7, после градиентно-выпуклого iOS6 (я про тотальную flat-изацию). Тогда потребитель тоже шумел на каждом углу, что это катастрофа. Но по факту все незаметно привыкли. И теперь сомнений нет — шаг был сделан в верном направлении!
    Однако со времен появления первого ПК Xerox Alto мы по сей день видим иконки на рабочем столе. И тот же iOS7 в этом плане не привнёс ничего нового, как и его последующие версии. Слишком велик риск! Ну и не надо мешать работать исправно работающей технике.

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

    (Например, теперь вы знаете, что все mail-приложения окрашены оранжевым. Насколько быстро вам удастся найти иконку Yandex.mail? Быстрее чем в предыдущий раз?)

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

    (Сможете ли теперь отыскать Google Maps, зная что вся навигация и карты окрашены розовым? Много ли времени заняло это у вас?)

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

    (Но если из предыдущего примера вы запомнили, что все приложения-карты у нас розовые, сможете также быстро найти сместившийся Google.Maps?)

    Вместо заключения


    Но это как минимум посягательство на святое и необоснованный риск, ведущий к необратимым последствиям. Всенепременно, нужны исследования. Но я чувствую как тихонько кивают головой те UX-специалисты, которые пророчат падение иконок и торжество надписей в недалёком будущем. Лично я выбираю нейтральную позицию! Так ли страшны потенциальные дубликаты букв? Хватит ли различимых оттенков цвета на различные категории приложений? Одно несомненно — унификация рабочего стола ведёт к равновесию и возможной скуке в Google.Play и AppStore. Теперь никто не сможет захватить лидерство, нарисовав только лишь иконку лучше чем ваша! Fair Play…
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 9

      0
      Anybody? Интересно же.
        0
        Теперь мне ясно, на чём базировались создатели интерфейса Metro.
          +5
          "Привет", — сказал мой телефон.

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

            Когда я купил первый смартфон на Android, я пользовался HTC Sense, где был поиск среди установленных приложений. Пользовался для запуска приложений исключительно им, для меня это было быстрее визуального поиска приложения. А вот на коммуникаторе под Windows Mobile 6 с выпадающим меню "Пуск" не помню особых сложностей поиска приложений, он умел раскрываться в несколько рядов, не было скроллинга.
              +1
              Наверняка можно сделать такую оболочку для андроида и потестить в живую.
                +1
                Можно. Реп с кодом и апк github.com/BlackDizel/PeriodicTableLauncher
                  0
                  Для создания подобных и иных интерфейсов есть хорошая софтинка-лончер ssLauncher. Рекомендую
                  +1
                  Изначальная идея (на уровне мониторинга) блестящая. Но для интерфейса смартфона не выглядит как что-то удобное.
                    +1
                    Для мониторинга действительно супер, а вот для смартфона/планшета как-то не очень. Считаю, что если для новой идеи совсем нет критики, то вполне возможно, её просто никто не читал. Поэтому сразу напишу о следующем:

                    Цветной фон уже поставить не получится. Месенджеры потеряются на фоне травы, а соцсети — на фоне неба.

                    Допустим, я новый пользователь, который только купил телефон — как мне искать Приложение «Телефон»? Раньше я находил его по зеленой трубке на значке, сейчас надо читать все значки? И что искать: Ph(one), Te(lephone), T(ele)p(hone) или вдруг локализованную Те(лефон)?

                    Количество приложений в магазинах на несколько порядков больше, чем количество комбинаций из 2 символов. Уже с 3 символами на каждом значке рабочий стол будет «перегружен», а ведь и трёх символов недостаточно, чтобы охватить все возможные названия — с трудом себе представляю, как в эту концепцию мог бы вписаться Star wars: Knights of the old Republic. Или, например, «Angry birds. Star wars»

                    Даже среди системных у вас на грани фола различие Ca / Cm / Cl. Без подписей кто поймёт, какой значок что означает? А калькулятор как обозначается? На примере значков Pa / Pe видно, что и для несистемных приложений придется вчитываться.

                    Первая буква большая, но что делать если требуется акцент на втором слове в названии? А если в названии три слова? Какую двухсимвольную последовательность предлагаете для Facebook messenger?

                    В продолжение предыдущего — VK Music и VK Messenger будут отличаться только цветом?

                    Как отличать «Subway surfer» от «silent swords», а «Angry birds» от «Angry birds 2»? Если забыть временно про игры, то как различить «YahooMail» от «YandexMail»?

                    Многие компании используют цвет как часть бренда — почему вдруг Viber должен быть зеленого ватсапповского цвета? А какой цвет для финансовых приложений (Сбербанк предпочитает зеленый, ГазПромБанк — синий, а УБРиР — красный).

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

                    В итоге концепт жизнеспособен только в случае строго ограниченного списка приложений/категорий. Но это только мое imho

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

                    Самое читаемое