11 заметок с тегом

интерфейс

Один из важнейших вопросов для тестирования

Ездил в Крым и в ходе поездки протестировал сайт «Госпаром». Оформлял через себя четыре машины и столкнулся с неудобством при сохранении брони в файл. Получилось восемь документов и при каждом сохранении формировался файл с одним и тем же названием. Я запутался!
Программно реализовать сохранение с уникальным именем вопрос нескольких строк кода.

номер_машины.pdf — для машины
номер_машины-фамилия_имя.pdf — для пассажира на машине
фамилия_имя.pdf — для пассажира

Почему об этом не подумали? Потому что не задались важным вопросом.

А что если...

... один человек оформляет несколько машин?
... один человек оформляет группу людей?

Сделали крутой продукт? Ощутили чувство самоудовлетворения? А что если...?

Навигация на сайте МИФа

Издательство «Манн, Иванов и Фербер» одно из моих самых любимых. Столкнулся с навигацией по сайту издательства... Это просто жесть какая-то!

Я искал книгу Карен Макгрейн «Контентная стратегия для мобильных устройств». Пока не вбил в поиск, не получалось найти. Помнится, раньше было проще. Искал по серии. Хотя я могу и ошибаться.

P.S. Если любите квесты, то предлагаю вам найти эту книгу не через поиск. Вот захотелось вам узнать, а не появился ли новый перевод из серии книг «A Book Apart».

P.S.S. Не ошибся я! Все было проще. Сравните страницу «Книги» сейчас и 15 марта 2015 года. Ну и зачем было менять? Теперь боковая колонка дублирует содержание фильтра в основной.

 Нет комментариев    3   2015   брюзжания   интерфейс   мысли

«Музыка» на iOS: Слушать или смотреть?

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

Первые два скриншота — iPad. Последний — iPhone.

Как выглядит интерфейс построенный на том, что важно удобство прослушивания? Посмотрите на плейер «Listen», но... Некоторые считают, что это другая крайность.

Где истина?

Истина где-то посередине!

P.S. На каком приложении слушаете музыку на iOS?

 Нет комментариев    4   2015   брюзжания   дизайн   интерфейс   мысли

Чья CMS всех милее, всех быстрее и умнее?

Я уже вылез из cms-штанишек, когда считал, что лучше всего для сайта подходит CMS Joo... Да неважно какая! Главное, чтобы нравилась мне и на которой я набил руку.
Сейчас я подбираю систему в зависимости от проекта. Захотелось узнать, каким образом подходят к выбору CMS мои читатели. Используете рейтинги? Есть какой-то алгоритм? Или существует любимая система? Тогда почему она?

P.S. Может, встречали сводную таблицу CMS? Киньте ссылку, пожалуйста.

Дополнительные материалы:
Рейтинг CMS по версии iTrack
Каталог CMS от CMSmagazine
Выбор CMS от CMSlist
Обзор и классификация CMS по категориям 2013 года

Церковный сайт: Советы по дизайну

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

Люблю советы по существу. Нравится публикация «70+ tips for effective church sites». Привожу часть советов в вольном переводе. К ним буду добавлять другие советы и комментарии. Чтобы не громоздить в одну публикацию, разобью советы по темам. Потом соберу эти публикации в отдельный проект.

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

  1. Не помещайте слишком много информации на главной странице.
    Она нуждается только в таком количестве графики и текста, чтобы с первого взгляда объяснить, кто вы и что доступно в других частях сайта. Домашняя страница — это дверь, а не конечная остановка. Она не приветственное письмо пастора — сайт не то же, что напечатанная брошюра.
  2. Поместите важную информацию выше «сгиба» экрана.
    Почти всё должно быть видно без необходимости прокрутки страницы. Домашняя страница не должна быть намного больше, чем один экран по высоте. Исключение — одностраничные сайты.
  3. Избегайте христианской графики (открытых Библий, витражей, голубей, свеч) и обращений о пожертвованиях.
    Многих неверующих не располагает такая графика. Некоторые церковные сайты используют анимированную графику 1990 годов: вращающиеся золотые кресты и голубей машущих крыльями. Не добавляйте на сайт автоматически проигрывающиеся при посещении мелодии гимнов или музыкальные файлы — это раздражает. И при упоминании финансов, пусть они находятся только в тех разделах, которые чётко направлены на членов церкви или благотворительность.
  4. Используйте, по крайней мере, одну фотографию с людьми на главной странице.
    Церковь, прежде всего, это люди, а не здания. Приветственная картинка может выразить и сказать гораздо больше, чем множество слов, и пояснить значение текста.
  5. Макет в три колонки, часто лучше других подходит для церковного сайта.
    Вы можете подобрать готовый к вашему дизайну и кодированию шаблон для страниц — с уже созданными блоками, колонками и нижним колонтитулом, чтобы использовать в вашем редакторе HTML. Альтернатива — это готовый шаблон сайта для CMS.
  6. Не используйте «вводную страницу» или всплывающие сообщения и баннеры.
    «Вводной страницей» является страница, не содержащая ничего, кроме графической (или даже анимированной информации) и ссылки из рода «нажмите здесь, чтобы продолжить». Это сильно раздражает пользователей. Большинство людей сразу покинут сайт, а не продолжат. Всплывающие сообщения уменьшат рейтинг сайта в поисковиках и раздражают пользователей.
  7. Проверьте, чтобы каждая страница имела один и тот же внешний вид, с навигацией в одном месте.
    Страницы, испытывающие недостаток единства в стиле, запутают пользователей. Возникнет вопрос, не попали ли они на другой сайт. Навигационное меню появляется на всех страницах в одном месте, и не заставляйте людей возвращаться на домашнюю страницу, чтобы попасть на другую.
  8. Ссылки, пункты меню и кнопки чётко определяются в активном (при наведении) и пассивном состоянии.
    Ссылки и кнопки, которые ничего не делают, при наведении на них курсора — мёртвые. Людям нужны визуальные подсказки. Кроме того, долго и упорно думайте, прежде чем внедрять стили ссылок далёкие от стандартных. Синяя подчёркнутая ссылка понимается большинством людей. Не подчёркивайте текст, который не является ссылкой — это приводит к заблуждениям.
  9. Используйте цвета правильно. Разберитесь, как выбрать цветовую схему, как цвета соотносятся друг с другом и с каким настроением они ассоциируются.
    Обратитесь к дизайнерам за советом. У большинства из нас не намётан глаз для нужного цвета. Конфликтующие или неуместные цвета помешают посланию сайта и оттолкнут привлечённых посетителей.
  10. Не используйте узорные графические фоны позади текста.
    За немногими исключениями, оптимальным считается чёрный текст на белом фоне или инверсия этих цветов. Однотонный фон лучше.
  11. Применяйте отзывчивый (резиновый, адаптивный) дизайн страницы.
    Содержимое сайта должно естественно меняться и подходить друг к другу, при любом разрешении экрана, а размер шрифтов подстраиваться для удобства пользователя. Это, лучше, чем сделать фиксированную по ширине страницу в 800 пикселей. Всё больше людей в настоящее время используют мобильные устройства для поиска и просмотра информации. Расширения мониторов растут, поэтому готовьте сайт к Ретина экранам.
  12. И не помещайте информацию на сайте о том, что сайт «нужно просматривать при разрешении...» или «лучше всего рассматривать в браузере…».
    Это раздражает людей, которые используют другое разрешение или браузер. Это ваша работа сделать просмотр удобным независимо от разрешения экрана, браузера или операционной системы пользователя. Не ставьте видимый счётчик посетителей на своих страницах.
  13. Не используйте излишние и специфические эффекты.
    Некоторые «крутые» особенности сайтов, такие как переливающийся и мигающий текст, «весёлые» анимации или инновационные системы меню, просто раздражают. Посетители игнорируют эти специальные эффекты и покидают сайт, если они быстро не находят то, что они хотят.
  14. Избегайте длительного времени загрузки сайта из-за графики.
    Сайт, заполненный графикой может выглядеть привлекательно при просмотре на вашем компьютере, но при доступе пользователей к нему, его загрузка займёт много времени. Хотя скорости в интернете растут, многие ещё ​​используют медленные модемы. Помните, что большинство людей не будет сидеть на медленном сайте. Лучший способ сделать это — избегать изобилия графики. Фотографии прекрасны и они помогают показать кто вы, но если их много, то разместите их на специальной странице. Люди сами выберут, хотят ли они их смотреть.
  15. Ваш сайт не должен быть излишне большим или сложным.
    Если у вас нет финансов или сотрудников, чтобы поддерживать крупный сайт, лучше сделать привлекательный одностраничный сайт. Можно сайт из нескольких информативных страниц. Если нужен большой сайт, то рассмотрите вариант создания сайта группой церквей города или региона.

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

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

Цветовая схема для сайта

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

Paletton — конструктор цветовых схем, который имеет массу инструментов (цветовое колесо, цвета с лучшей совместимостью, триадные цвета и т. д.), чтобы помочь вам собрать цветовую схему. Есть возможность посмотреть результат на тестовой странице сайта и сохранить его в CSS, LESS, HTML и ещё куче форматах.

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

Adobe Kuler — об этом инструменте уже написано многое. Добавлю только что им можно пользоваться на русском языке и есть возможность создать цветовую тему из загруженной картинки (логотипа или центральной иллюстрации с сайта).

Сolourcode — классный инструмент с интересной логикой работы. Выбираете понравившийся цвет водя курсором по экрану и строите цветовые схемы относительно его. Результат сохраняем в картинку, SCSS или LESS.

Дополнительные материалы:
Гармония цвета — основные правила сочетания цветов
(en) Four Quick Tips For Improving Color Harmony In Your Theme Customizations
(en) Best Color Tools For Web Designers — целая куча инструментов для создания цветовых схем.
Цветовые схемы в веб-дизайне: шесть советов для начинающих

Бесконечный скролл

Что думаете об этом явлении? Не знаю как вас, но меня бесконечный скроллинг (Infinite Scroll) раздражает. А особенно, когда я имею дело с десктопными версиями сайтов. И вопрос не только психологической неудовлетворённости (см. Как бесконечный скролл в мобильных приложениях разрушает потребление контента), но и в его применении где попало (то же мне веяние моды!).
Например, на сайтах где есть подвальная информация (footer). Ну зачем! Или это особый шик поместить ссылку «разработчикам» в подвал страниц с этим скроллом, чтобы они в процессе её ловли воспитывали в себе терпение или мате... задавались вопросом: «Кто же это придумал?» Не гонитесь за веяниями! Ну, а если и используете этот скролл, то прочитайте статьи предложенные мною ниже (и комментарии к ним). Может вам нужно что-то изменить в его реализации.

Дополнительно почитать:
(en) So You Think You’ve Built a Good Infinite Scroll
Вплоть до бесконечности! Преимущества и недостатки бесконечного скроллинга
Улучшаем «бесконечный скроллинг»
Оптимизация бесконечного скроллинга — рекомендации от Google
Бесконечный скроллинг: эффективное решение или причуда?

 Нет комментариев    2   2014   дизайн   интерфейс   мысли

Мои выводы из дебатов о подчеркивании ссылок

С удовольствием почитал рассуждения о ссылках на блоге у Ильи Бирмана, и хочу подвести для себя некоторые выводы.

  • В меню (если понятно, что это меню) ссылки можно выделять как душе угодно.
  • Если на сайте нет буйства цветов, то ссылки можно не подчеркивать (другой цвет — значит ссылка).
  • Если не подчеркиваешь, то делай ссылки синими (чтобы аналогии возникали с «популярными» сайтами).
  • В версиях для планшетов и мобильных, лучше подумать над другим способом выделения ссылок.
  • Тонкое подчеркивание только для шрифтов без засечек (имхо). В остальных случаях border-bottom!
  • Вопрос анимации ссылки — это вопрос личного восприятия. Главное, чтобы не мешала.
  • Заголовки статей (и других «ожидаемых» ссылок) можно не подчеркивать (имхо).
  • Если используешь подчеркивание у псевдоссылок, то, будь добр, и у обычных ссылок его использовать!
  • ...

Вывод: Важно поднимать вопросы ожиданий и мышления пользователя, а не следовать своим желаниям. Если ты, конечно, не для себя только сайт сделал!

 1 комментарий    1   2014   дизайн   интерфейс   мысли

Тег label в формах

Начнем все со слов Люка Вроблевски, из его книги «Сначала мобильные!», которая, на мой взгляд, обязательна к прочтению всем веб-разработчикам.

«Элементы label, располагающиеся над полем ввода, — хорошее решение. Но если они находятся внутри поля формы — еще лучше.
...
Элемент label внутри поля ввода формы:
• Никогда не должен становиться частью ответа. Вы никогда не обнаруживали, что слово найти неожиданно становилось частью вашего поискового запроса?
• Не должен быть похожим на текст, который вводится в поле. В противном случае пользователь (и вполне обоснованно) может предположить, что программа уже ввела ответ за него.
• Как только пользователь начинает вводить текст в поле, label обычно исчезает и больше не появляется. Таким образом, заполнив форму, он не может проверить, на какой именно вопрос отвечал.»

Итак, на основании всего выше зацитированного, можно нарисовать такую картинку.

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

ОБНОВЛЕННО (18.05.2014): Хорошая статья по теме — «The Definitive Guide to Form Label Positioning».
ОБНОВЛЕННО (31.05.2014): Ещё статья — «Placeholders in Form Fields Are Harmful».
ОБНОВЛЕННО (31.07.2014): И ещё статья — «Adaptive Placeholders»
ОБНОВЛЕННО (29.08.2014): Обалденный пример кода — «Form Placeholder Labels»
ОБНОВЛЕННО (08.01.2015): Несколько реализаций на CSS — «Inspiration For Text Input Effects»

 2 комментария    2   2014   дизайн   интерфейс   мысли

Анализируем интерфейс iGuides.ru

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

Первое замечание

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

Второе замечание

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

Третье замечание

Ссылки на сайте обозначены приятным голубоватым цветом, который Яндекс назвал «твиттер». Не буду на них заостряться, хотя тоже можно в них «вглядеться». Вопрос в том, что ссылка на форум... БЕЛАЯ! Понять, что это вход в желаемое место сайта, а не сообщение о наличии на сайте форума, можно только наведя на эту надпись курсор.

Четвертое замечание

Ура я попал в раздел форума! Следующая задача — войти в него. О нет! Я снова ничего не могу найти! Почему? Потому, что разработчик интерфейса поместил вход на форум не в отдельное место, а спрятал его в рекламе, которую глаза и разум уже автоматом отметают. Поищите сами на скриншоте.

Пятое замечание

Молчу про выбранный шрифт для входа (Ну почему не кнопка, которую ищет глаз?). Объясните мне, зачем в надписи «Войти или зарегистрироваться» сделана инверсия цветов? По логике получается, что «или» это ссылка, а «Войти» и «зарегистрироваться» это обычный текст. Снова выручает наведение курсором.

Больше писать не хочу. Пойду лучше на свои сайты критическим оком посмотрю!

P.S. Цель этой публикации не «опустить» собрата дизайнера, а в том, чтобы мы научились думать как пользователи наших проектов.

ОБНОВЛЕННО (05.09.2014): Молодцы! Многое исправили. Осталось сделать нормальный вход на форум (пятое замечание).

 Нет комментариев    4   2014   дизайн   интерфейс
Ранее Ctrl + ↓