• Как превратить обычные сайты в адаптивные?

    • Перевод
    • Tutorial
    На данный момент около 11-12% из 100 000 самых посещаемых сайтов — адаптивны, и нет сомнений, что в ближайшие несколько лет их количество возрастёт.

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



    Адаптивная модернизация




    Адаптивная модернизация — это процесс, при котором берется существующий сайт, предназначенный только для настольных компьютеров, и «переделывается в адаптивный» по факту.
    Читайте подробнее о способах внутри
  • Хороший дизайн интерфейсов. Часть 3

    • Перевод
    • Tutorial
    Это третья часть переведённых заметок «Good User Interface». Первые 16 частей уже ранее перевели наши коллеги из ADV на Хабре, а вторые 11 перевели мы.

    Идея 28


    Используйте варианты по-умолчанию, не заставляя людей выбирать


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

    Остальные 10 заметок далее
  • Командная работа над интерфейсами

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



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

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

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

    А началось все с личного кризиса.
    Читать дальше →
    • +24
    • 15,9k
    • 8
  • Как улучшить выбор страны из списка

    • Перевод
    • Tutorial
    Представляю вашему вниманию перевод статьи под названием "Redesigning The Country Selector" от Christian Holst. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания Smashing Magazine.

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



    Однажды, проводя масштабные юзабилити-тестирования (о которых мы писали на Smashing Magazine в апреле 2011. Примечание переводчиков: мы перевели и эту статью тоже. Обязательно ознакомьтесь :), мы последовательно столкнулись с несколькими проблемами, связанными с выбором страны. Якоб Нильсен сообщал о похожих моментах в 2000 и 2007 годах, когда он тестировал выпадающие списки с большим количеством внутренних элементов, к примеру, таких, как перечни штатов или стран.

    Читать дальше →
  • О регистрации на сайтах

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


    Пример удачной регистрации на сайте Tumblr.

    Начну с определения самого понятия «регистрация», с ним всё не так просто, как может казаться. В результате полевых исследований нашей компании оказалось, что разные люди (клиенты, посетители и мы сами) нередко воспринимают это слово по-разному. Для того, чтобы избежать непонимания, опишу то, как я сам вижу регистрацию.
    Читать дальше →
  • Исследование о мобильных интерфейсах

    • Перевод
    • Tutorial
    Представляю вашему вниманию перевод статьи под названием "A Study of Trends in Mobile Design" от Alexander Dawson. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания Smashing Magazine.

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



    Цель этой статьи — рассказать вам о методах, которые используются на самых популярных сайтах для того, чтобы предоставить пользователям мобильных устройств удобное и (надеемся) полезное взаимодействие. Среди проанализированных сайтов много известных компаний, например Facebook и Amazon. Мы приготовили для вас настоящий экскурс в мир мобильного веб-дизайна, со статистикой и по-настоящему интересными открытиями.
    Читать дальше →
  • Проектирование и дизайн сайтов Би-Би-Си

    • Перевод
    • Tutorial
    Представляю вашему вниманию перевод статьи под названием "User Experience and the design of news at BBC World Service" от Tammy Gur. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением компании BBC и издания Johny Holland Magazine.




    Проектирование окружающей среды для стремительного потока информации, проходящего через новостной веб-сайт в режиме нон-стоп — это вызов, не похожий ни на что другое. Команда дизайнеров и специалистов в области UX в BBC World Service создает новостные сайты для десктопных и мобильных браузеров на 27 языках, удовлетворяя различные аудитории по всему миру. В этой статье мы поделимся этим опытом с вами.
    Читать дальше →
  • Ничего не нашлось в поиске по сайту? Нет проблем

    • Перевод
    • Tutorial
    Представляю вашему вниманию перевод статьи под названием "Site Search: Strategies for No Results Found" от Linda Bustos. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением компании Elastic Path.


    Эта статья написана по мотивам книги Грега Ньюдельмана "Designing Search: UX Strategies for Ecommerce Success". Необычно видеть книгу на 300 страниц, посвященную одному единственному аспекту создания интернет-магазинов, но оптимизация поиска по сайту действительно заслуживает такого внимания!

    image

    Есть одна составляющая оптимизации поиска по сайту, на которой мы часто зацикливаемся: как удержать пользователя на сайте, даже если в результате поиска ему не удалось найти то, что требовалось. Статья основана на разделе "No Search Results Strategy: Not a Zero-Sum Game" вышеупомянутой книги. Ньюдельман говорит о том, что «нет простого набора правил, которые гарантировали бы успешное внедрение страницы результатов поиска в случае, когда не было найдено ни одного совпадения. Но есть четыре принципа, от которых стоит отталкиваться»:
    Читать дальше →
    • +84
    • 4,8k
    • 9
  • Вероятно, самый удобный способ узнать прогноз погоды — iPogoda

      Привет, уважаемые читатели Хабрахабра!

      Рады представить вам погодный сайт нового поколения — iPogoda.ru. Мы расскажем вам о том, почему нас не устроили существующие сервисы и чем iPogoda отличается от них.

      image
      Читать дальше →
    • Двухдневная конференция-практикум о дизайне и юзабилити — Ди-Кэмп

        Здравствуйте, уважаемые читатели Хабра :)
        Мы с радостью хотим представить вам событие, которое будет проходить 24-25 Сентября на Украине, в городе Запорожье — D-Camp.



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

        Читать дальше →
      • Вместе веселее. Как наладить эффективное сотрудничество творческих людей

        • Перевод
        • Tutorial
        Представляю вашему вниманию перевод статьи под названием "Better together; the practice of successful creative collaboration" от Stefan Klocek. Перевели специально для пользователей Хабрахабра с одобрением компании Cooper.


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



        Двое (или больше) творческих людей могут использовать эти добродетели, если будут хорошо играть в команде. Практика “парного дизайна”, используемая в Cooper, взрослела больше чем десять лет, и развивается вместе с ростом компании, формируя новые пары, в которых дизайнеры учатся друг у друга каждый день. Хотя не существует никакой магической формулы, но большинство самых успешных совместных работ такого плана на нашей памяти обладали на удивление схожими характеристиками.
        Читать дальше →
      • UXCamp 2011 — конференция под открытым небом

          Привет, уважаемые читатели.
          Мы бы хотели пригласить вас на UXCamp 2011 замечательное событие, которое пройдет в Киеве 30-31 июля. В этом году, само собой :)



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

          А это первый шаг к появлению множества полезных интерфейсов ориентированных на людей.
          Читать дальше →
        • Дизайн форм регистрации для детей

          • Tutorial
          Представляю вашему вниманию перевод статьи под названием "Designing Web Registration Processes for Kids" от Deb Gelman. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания A List Apart.


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



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

          Читать дальше →
        • Спасибо, Кэп!

            Дизайн-бюро «make» и студия «Март» проводят 02 июля в Одессе форум «Спасибо, Кэп!».
            Приглашаем всех желающих!



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

            Интересные доклады, новые знакомства, лето, море, солнце и Одессу — гарантируем.

            Читать дальше →
          • Упрощаем регистрацию и вход на сайт

            • Tutorial
            Представляю вашему вниманию перевод статьи под названием "Innovative Techniques To Simplify Sign-Ups and Log-Ins" от Anthony T. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания Smashing Magazine.


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



            Форма авторизации на сайте Basecamp

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

            Читать дальше →
          • Стоит ли нам использовать повествовательные веб-формы?

            • Tutorial
            Представляю вашему вниманию перевод статьи под названием "Should We Use Mad Libs Style Form?" от Cynthia Savard Saucier. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением компании Yu Centrik.


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

            Однако недавно мы увидели, как появляется новый тип форм. Восхваленные юзабилити экспертом Яредом Спулом и гуру дизайна форм Люком Вроблевски, повествовательные формы (в оригинале Mad Libs) стали очень популярными. Давайте разберемся, что же это такое.

            Читать дальше →
          • Дизайн контекстных меню

            • Tutorial
            Представляю вашему вниманию перевод статьи под названием "Context Menu design" от Hagan Rivers. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением компании Two Rivers Consulting Corporation.


            Что такое контекстное меню?


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



            Контекстное меню сообщения в Apple Mail (слева) и Windows Mail (справа).
            Читать дальше →
          • Юзабилити-маёвка

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



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

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

              Еще, что интересно, ux-маёвка собирается в трех странах и, на текущий момент в четырех городах, Киев, Москва, Питер и Минск.
              При этом каждый может собрать маёвку в своем городе 28 мая и рассчитывать на поддержку со стороны организаторов.

              Итак, ждем 28 мая и пока регистрируемся на официальном сайте.
            • Принципы дизайна страниц оплаты для интернет-магазинов

              • Перевод
              • Tutorial
              Представляю вашему вниманию перевод статьи под названием "Fundamental Guidelines Of E-Commerce Checkout Design" от Christian Holst. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания Smashing Magazine.


              Грустная статистика систем электронной коммерции — согласно последним исследованиям, по крайней мере 59,8% потенциальных покупателей покидают сайт на этапе оформления заказа и его оплаты (у разных исследований разные показатели — от 59,8% у MarketingSherpa до 83% у SeeWhy).

              Основной вопрос заключается в том, почему пользователи так часто и массово покидают свою корзину, не закончив оформление заказа? Причина заключена в какой-то фундаментальной ошибке дизайнеров, создающих интернет-магазины? А быть может есть какие-то формальные правила, которые усложняют жизнь простым пользователям и мешают им покупать продукты? Существует ли какая-то возможность улучшить ситуацию и повысить конверсию электронных магазинов?
              Читать дальше →
            • Можно ли спроектировать впечатления?

              • Перевод
              • Tutorial
              Представляю вашему вниманию перевод статьи в двух частях под названием "Can Experience be Designed?" от Oliver Reichenstein. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением компании Information Architects Inc..


              Для начала загадайте число от одного до десяти. А затем сделайте шаг назад и посмотрите на словосочетание «Проектирование впечатлений пользователя» так, словно вы никогда раньше его не видели.



              Смотрите внимательно на эти слова до тех пор, пока вы не услышите в своей голове волшебно красивый голос, произносящий их вслух: «ПРОЕКТИРОВАНИЕ ВПЕЧАТЛЕНИЙ ПОЛЬЗОВАТЕЛЯ». Что думаете? Все это кажется вам какой-то нелепицей? Нет, я говорю не про загадывание числа и не про шаг назад, а про идею. Идею о том, что кто-то может контролировать ваши чувства и ощущения. Или же вы с легкостью согласитесь, что ваши впечатления от прочтения этой статьи были продуманы мной как автором? Вы читаете этот текст каким-то своим, особым образом? Или вы прочитали и ощутили его так, как я это задумал?
              Читать дальше →