Мысли о программировании, жизни и христианстве.

Позднее Ctrl + ↑

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

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

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

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

Начинаем видеослужение в церкви

Писание учит нас тому, что нужно все взвесить перед стартапом (Лука 14:28-30), чтобы не насмешить потом людей. Поэтому видеослужение, которое требует достаточно больших финансовых вложений, требует тщательного предварительного размышления. Итак, подумаем?
Любое служение должно решать какую-либо нужду, иначе это оно не является служением. Видеослужение — это, прежде всего, информационное служение, поэтому его ценность определяется ценностью той информации, которую оно использует. Условно, видеослужение — это «винчестер», который постоянно подключен к реальной жизни церкви. Теперь, когда стало немного понятнее зачем оно нужно, задаемся следующим вопросом — а что нам нужно из жизни церкви сохранить?
Когда цель неизвестна, злоупотребления неизбежны! Если вам нужно выкладывать записи проповедей на YouTube, то к этому служению незачем предъявлять требования необходимые к работе на телевидении. Другими словами, важно понимать, какую продукцию вы хотите получить от видеослужения. В описании курса «Видео и церковь» вы можете посмотреть различные виды возможной видеопродукции. Составьте свой список того, что вы хотите создавать и отталкивайтесь от него в дальнейшем размышлении. О чем?

Во-первых, о том, насколько эта продукция будет востребована.

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

Во-вторых, как вы будете осуществлять «эволюционное» развитие этого служения?

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

В-третьих, определитесь с минимумом и максимумом нужного вам оборудования.

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

Дополнительно почитать и посмотреть:
Видео форумы:

Videomax
Бывший SavDink
Форум Доктора Вована

Покупка оборудования:
...

P.S. Публикация обновляемая и исправляемая.

Тег 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»

Планирование времени VS Ситуационное планирование

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

Планирование времени

Это обычное календарное планирование дел. Есть временная рабочая сетка, в которую вы фиксировано вносите свои дела с временем их начала и конца.
Плюсы:

  • Жесткий контроль. Вы точно знаете, что и когда делаете.
  • Существует Deadline («последний срок»). Это мотивирует и не дает «утонуть» в невыполненной задаче.
  • Не дает отвлечься. Каждому часу своя задача. Когда бить баклуши?
  • Экономия времени. Нет вынужденных перерывов и лишней «раскачки» между делами.
  • Простота. Вам нужен только календарь и список ваших дел.

Минусы:

  • Отсутствие гибкости. Если, вдруг, появляется важная и срочная задача... Все ломается!
  • Не учитывает вашего физического и душевного состояния. Встал не с той ноги? Все валится из рук? Работай!

Ситуационное планирование (Похоже на Getting Things Done или Agile Results)

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

  • Гибкость решения. Я делаю то, что действительно хочу сейчас делать!
  • Можно двигаться сразу в нескольких направлениях. Не получается одно? Так почему бы не заняться другим?
  • Отсутствие ограничивающих рамок. Благодатная почва для творческих людей.
  • Концентрация на пути. Важен постоянный процесс, а результат придет, как следствие.
  • Свобода во времени. Захотелось поработать ночью? Работай!

Минусы:

  • Можно делать только то, что нравится. Синдром откладывания трудных и не любимых дел.
  • Иногда в процессе теряется важность цели. «Конец дела лучше его начала.» (Екклесиаст 7:8а)
  • Опасность перфекционизма. Можно без конца все доводить до эфемерного идеала.

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

Дополнительные материалы:
Про GTD
Про GTD и Agile Results
Про Agile Results

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Приглашения по емайл: основные ошибки

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

Вся рассылка одно изображение

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

Отсутствие хоть одной картинки

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

Многословность

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

«Спрятанная» важная информация

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

Непонятные и неоптимизированные темы письма и заголовки

Первое, что видит ваш получатель — это тема письма и, в зависимости от почтовой программы или сервиса, первый текст из него. Учитывайте это! Абстрактная и неоптимизированная тема отпугнет читателя. Например, тема «Советы по модернизации молодежного служения церкви» будет лучше выглядеть так — «Молодежное служение церкви, советы и рекомендации». В первом случае, нужно продраться через три слова (одно вообще сложно читаемое) и понять насколько это письмо тебе нужно! Также избегайте спамерских слов в теме («распродажа», «выигрыш» и т. п.) и ПРОПИСНЫХ букв.

Рассылка из личной почты

Еще один путь в спам. Используйте для массовых рассылок сервисами почтовых рассылок! Я рекомендую Mailchimp. Потратьте немного времени и пользуйтесь профессиональными инструментами.

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


Дополнительно можно почитать и посмотреть:
Поищите статьи по теме
Еще один блог
Требования Яндекса к честным рассылкам
Девять правил легальной рассылки от Google
Анализатор заголовков сообщений (eng.)
Огромное количество материалов (eng.)

P.S. Если у вас есть хорошее дополнение к написанному, прошу оставить комментарий.

Хороший дизайн интерфейсов

В поисках вдохновения бороздил просторы интернета и наткнулся на сайт www.goodui.org, который дает простые и практические рекомендации по разработке «хорошего дизайна интерфейсов».
Для тех, кто не в ладах с английским, предлагаю найденный перевод:

  • Часть 1 — на Хабре (перевод ADV)
  • Часть 2 — в статьях проекта UX Fox компании UXDepot
  • Часть 3 — в статьях проекта UX Fox компании UXDepot
  • ...

P.S. Советы обновляемые, поэтому рекомендую подписаться на обновления с GoodUI.

ОБНОВЛЕННО (06.01.2015): Свежий перевод — 58 признаков хорошего интерфейса.

Минимализм в названии папок при кодировании

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

  • Не больше 4 символов (надо же стимулировать работу мозга)
  • Стараться использовать общепринятые обозначения при возможности
  • Символы брать из английского слова характеризующего содержание.

Движок — юзабилити

css — папка стилей
thms — папка с темами
lg — папка языковых файлов
docs — папка документации

Контент

i — папка изображений
s — папка аудио
v — папка видео
p — папка фотографий

Движок — основные папки

js — папка для javascript
inc — папка подключаемых данных
a — административная папка
com — компоненты движка сайта (привет joomla)
mod — модули движка сайта
plg — плагины движка сайта
fn — папка функций
lib — папка библиотек
clss — папка классов
logs — папка логов

Разное

misc — папка для всякой всячины
tmp — папка для временной информации
upl — папка загрузок

P.S. Все выше написанное условно и подвергается конструктивной критике. Жду комментариев и предложений!

Артемий Лебедев «Ководство» : Мысли

Если вы еще не читали «Ководство», то прочитайте хотя бы его онлайн версию. Не со всем я согласен, но мозг начинает работать в правильном направлении.

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

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

Дизайн должен быть эффективен без использования нечестных приемов.

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

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

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

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

В интернете нельзя использовать звуки и музыку в декоративных целях.

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

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

Симметрия — мощный прием, который нельзя применять только «для аккуратности» или «для красоты».

Усложнение, так же как и упрощение, является сложным приемом, и применять его надо с умом.

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

Сообщение всегда должно учитывать условия его получения.

Прописные буквы всегда разрежаются, строчные — никогда.

Дизайн должен быть простым, но не примитивным.

«Наша работа заключается в том, чтобы найти наиболее удобный, простой и красивый способ решения поставленной задачи, не потеряв по дороге смысл».

Один из самых эффективных дизайнерских приемов — придумывание неудобных, непонятных и запутанных решений.

В экранных интерфейсах любые элементы управления не должны быть по площади меньше квадрата размером 16×16 пикселей (в который умещается курсор).

&

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

§

Знание: только в ограничениях рождается хороший дизайн.

Альтернативы выпадающему подменю в дизайне

Дизайн некоторых элементов сайтов настолько устоялся, что необходимость в их изменения подчас даже не приходит на ум. Одним из таких элементов является меню. И хотя трудно представить как нужно изменить этот элемент, некоторые его составляющие все чаще вызывают у меня недоумение. Рассмотрим выпадающие подменю из главного меню, которое применяется на большинстве сайтов, которые мне встречаются в интернете. Что смущает? Ну почему они должны перекрывать при выпадении другие элементы дизайна! А иногда, когда в подменю много элементов, эти области просто огромны. Как можно избежать этого?

Способ первый: от вертикали к горизонтали

Расположить элементы подменю линейно под основным меню. Как видите на иллюстрации, такое расположение не перекрывает сильно картинку (можно даже вообще убрать перекрытие). Минус при таком расположении в сложности попадания в крайние пункты подменю, а про подподменю вообще молчу!

Способ второй: показываем все

А зачем вообще их прятать? Можно же сделать подменю частью дизайна! Идея конечно так себе, но в некоторых проектах может сработать.

Способ третий: шаг за шагом

А почему бы не показать элементы подменю после перехода по ссылке в меню? Хм... Этакий метод открытий. Минус в том, что если вы уже знаете о существовании подменю, то каждый раз двигаться от стартовой страницы вглубь утомительно и раздражающе!

Способ четвертый: а нужно ли?

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

P.S. Картинки набросал буквально за 10 минут, но вроде все понятно.

Ранее Ctrl + ↓