Позднее Ctrl + ↑

Боль от автоматических дверей

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

Посмею заявить, что каждый из нас хотя бы раз в жизни стоял у двери и ждал, когда она откроется.
Буквально в пятницу я была свидетелем, как в здании крупной IT-компании люди стояли у двери в ожидании, хотя на дверях были указатели, что вход в следующую дверь.
Так что было не так? Почему указатели не работали, и каждый второй не обращал на них внимания? А дело в дизайне, был нарушен важный принцип — наглядность. Указатель был серого цвета. Да, он гармоничен с самим зданием, потому что здание все стеклянное, современное. Но это указатель, и он должен выделяться на общем фоне, так как восприятие у людей не меняется настолько быстро, как стили в архитектуре и интерьере. Думаю, если сделать указатели красного цвета, то можно уменьшить количество ошибок. Мой эксперимент на картинке.

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

Всем хороших, интуитивно понятных дверей! 👋🏻

Как программа для чтения с экрана изменила мою жизнь

И сделала мои слова более значимыми.
Перевод статьи, автор: Clarizza Fernandez.

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

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

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

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

Что такое программа для чтения с экрана?

Программа для чтения с экрана — это вид вспомогательной технологии, где слепой и слабовидящий человек может “читать” контент на веб-странице с помощью преобразования текста в речь. Чтобы сделать контент доступным для них, ты должен сделать контент “читабельным” для программы. Это включает в себя разметку контента с помощью соответствующих тегов HTML (среди прочего), чтобы структура, нетекстовый контент и ссылки на веб-странице передавались пользователю программы чтения с экрана.

Как пользователь программы чтения с экрана просматривает интернет — Smashing Magazine

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

Написание для программ чтения с экрана хорошо для всех и SEO

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

Есть много ресурсов для авторов, которые хотят сделать свои слова более доступными для людей, использующих программу чтения с экрана (я рекомендую познакомиться с Web Content Accessibility Guidelines (WCAG 2.1)) и многие простые методы помогут вам достичь этого.

Простые приемы, которые вы можете применить к своему контенту прямо сейчас

1. Иерархия контента и структура страницы

Применение правильных тегов уровня заголовков, например, от <h1> до <h6> важно для передачи структуры страницы в программу для чтения с экранов. Плагин Yoast публиковал очень полезную статью с описанием важности заголовков для отображения структуры. Тщательное применение HTML тегов улучшает доступность страницы, SEO и структуру.

2. Сделайте ваши заголовки описательными

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

3. Сделайте ваши ссылки выразительными. Не используйте “Нажмите здесь”

Это руководство часто цитируется как SEO-специалистами, так и экспертами по доступности. Это W3C руководство содержит четкие указания на то, что вы должны рассмотреть вместо этого. Что касается меня, это было “правило ворот”, которое изменило мое мышление.

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

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

Большинство систем управления контентом (CMS) предоставляют возможность добавлять альтернативные текстовые описания для изображений. Пользователи программы чтения с экрана могут получить доступ к этой информации через атрибут alt, который вы можете включить в тег <img>.
Например,

<img src=”hellodoggo.gif” alt=”Щенок мирно сидит на диване”>

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

5. Имейте значимые заголовки страниц

Вы работаете с несколькими открытыми вкладками? Я тоже.

Зрячие пользователи могут легко определить, к какой вкладке им необходимо вернуться, просмотрев знакомый логотип и т. д. Описательные заголовки страниц дают возможность читателям с экрана перемещаться между вкладками тоже. Вы можете добавить описание заголовка страницы в пределах тега <title>. Они должны быть описательными и краткими.
Например,

<title>Коврики с узорами  —  Rugs R Us</title>

6. Знайте свою CMS

Наконец, каждая CMS уникальна. Под этим я имею в виду, что некоторые CMS будут автоматически использовать первые несколько слов вашего абзаца в качестве заголовка страницы или <h1>. Если это так, то важно знать это, чтобы вы могли оптимизировать контент для работы с программами чтения с экрана. Познакомьтесь с вашей CMS, чтобы в полной мере воспользоваться преимуществами оптимизации контента для более широкой аудитории.

Пусть программа чтения с экрана станет вашим гидом

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

7 шагов, чтобы стать UI/UX дизайнером

Советы и ресурсы, которые помогут вам начать

Перевод статьи, автор: Nicole Saidy

В последнее время я получаю много вопросов от людей:

  • Как я могу получать больше в UI/UX?
  • Я программист/маркетолог/стратег социальных медиа, и я хочу узнать больше о дизайне. С чего мне начать?
  • Откуда ты знаешь что такое хороший дизайн, а что плохой?

«Как я начинала?»

Этот вопрос возвращает меня обратно, когда я впервые начала свою карьеру. 7 лет назад был первый рабочий день на моей работе дизайнером. Я сижу перед пустой страницей в Photoshop на iMac (я была Windows-пользователем до этого). Я пытаюсь осознать, какое задание мне дал мой менеджер. Я понятия не имею как начать. Пустота.

Перед устройством на эту работу я только отучилась в университете с мультимедиа дипломом. Итак, почему я ничего не знала о дизайне? Что ж, университет не учит нас практическому дизайну. Большинство университетских курсов учат нас только теории, а иногда — как использовать инструменты дизайна, такие как Adobe Suite. Но этого недостаточно — даже близко.

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

Спустя 7 лет самообучения я преподаватель дизайна и спикер международной конференции.

Первую вещь, которую вы должны знать:

Вы не рождаетесь с этим.

Мы не какие-то существа-единороги, которые должны были стать дизайнерами и просто были рождены творческими. Дизайн изучен. Дизайн помогает решению проблем. Это процесс постоянного поиска проблем и создание решения для них. Есть много областей дизайна: UI, UX, продуктовые дизайнеры, графические дизайнеры, дизайнеры взаимодействия, информационный архитектор и список можно продолжить. Начните с выяснения, какая специализация вам наиболее интересна. А сейчас давайте сосредоточимся на наиболее распространенном типе: сочетание интерфейса и опыта — UI/UX дизайнер.

1. Ознакомьтесь с принципами пользовательского интерфейса

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

Вот некоторые основные принципы, которые вы должны знать.

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

2. Изучите творческий процесс UX

Следующая вещь это понимание творческого процесса. UI/UX дизайн это процесс определенных фаз, через которые проходит каждый творческий человек.

Процесс разделен на 4 отдельных этапа — Находи, Определяй, Разрабатывай и Доставляй — Double Diamond — это простая визуальная карта процесса проектирования.

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

Определение
Это этап, где дизайнеры определяют идею, извлеченную из фазы “Поиск”. Из этого создается четкое творческое задание.

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

Сдача
Заключительный этап — этап сдачи, где окончательный проект завершен, произведен и запущен.

Проверьте мою статью “Как оптимизировать рабочий процесс UI/UX с Figma“.

3. Развивайте свой взгляд на дизайн

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

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

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

Вот мои любимые сайты для вдохновения:

  • onepagelove.com Веб-сайт на одну страницу создан для вашего вдохновения.
  • awwwards.com Сайт, продвигающий дизайнерские таланты.
  • dribbble.com Сообщество дизайнеров, которые делятся своими работами.
  • pttrns.com Коллекция мобильных шаблонов дизайна.
  • uimovement.com Лучшее вдохновение для дизайна пользовательского интерфейса каждый день.

4. Читайте дизайнерские статьи каждый день

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

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

Так начните свой день с чашки кофе и нескольких вдохновляющих статей на Medium или Smashing magazine. Изучение новых вещей утром расширит ваш кругозор и создаст пространство для творчества в течение дня.

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

Вот мои любимый блог и новостные веб-сайты про дизайн:

5. Дизайн несуществующих проектов

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

Но мы можем сломать этот круг практикуясь самостоятельно, создавая несуществующие проекты для удовольствия! Dribbble полон этим.

Facebook Material Design by Kevin McCarthy

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

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

6. Изучите последние инструменты веб-дизайна

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

Вот последние инструменты, которые я использую в своей работе:

  • Sketch для дизайна интерфейса
  • Figma для совместного проектирования дизайна
  • Balsamiq для схематичных прототипов
  • Adobe XD для дизайна интерфейсов и проектирования
  • Marvel App для создания интерактивных макетов
  • Invision App для прототипирования и совместной работы

7. Будьте наставником и найдите себе наставника

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

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

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

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

Проверьте мой Github репозиторий Awesome Web Design, в нем есть список курируемых ресурсов для веб-дизайнеров.

Картинки: pexels.com, unsplash.com

 11   1 мес   UI/UX   перевод