Представляю вашему вниманию перевод статьи "Mobile Form Design Strategies" от Chui Chui Tan. Перевели в компании UXDepot. Специально для пользователей Хабрахабра с одобрением издания UX Booth.

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

Интернет на экране мобильного телефона находится под влиянием нескольких важных факторов:

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

В одном из предыдущих своих постов я пообещал продолжить тему о теории DISC для «нечайников». Сегодня очередной пост в эту сторону.
Наверное одним из ключевых моментов работы программиста, прожект-менеджера, да и вообще любого человека, как связанного с IT так и не связанного – это привычка, навык или умение доводить до конца начатые дела.
В этом посте мы разберёмся с этим вопросом.

Уделяйте достаточное внимание шаблонам

Люди тратят большое количество времени, используя различные интерфейсы (Facebook, Google, Windows, Mac OS и т.д.). В них уже могут быть представлены решения проблем, с которыми вы сталкиваетесь при проектировании. Поэтому не стоит изобретать колесо. Используя привычные шаблоны интерфейсов вы поможете пользователям почувствовать себя как дома.

CoTweet имеет привычный по почтовым клиентам шаблон.

Когда графический интерфейс пользователя только появился, дизайнеры проектировали диалоговые окна используя двоичный подход: «OK» и «Отмена». Нажатие кнопки «OK» в диалоговом окне означало, что пользователь хотел, чтобы система начала действовать. Нажатие кнопки «Отмена» означало то, что пользователь хотел вернуться обратно к приложению без принятия каких-либо действий. В то время как данный подход, в прошлом, был стандартом для ОС и приложений, сегодня принят более удобный для пользователя подход к проектированию диалоговых окон.

Вы PM. Как узнать – готова ли вёрстка к реальному использованию?
Вы заказчик. Как убедиться, что работа выполнена качественно?
Как оценить качество вёрстки?

Когда я стал тим-лидом, а позже PM, передо мной стала задача проверять вёрстку наших проектов. Нужно было выработать формальные, легкопроверяемые критерии, соответствие кода которым, должно было давать некую гарантию, что не будет факапов и ни клиент, ни программеры не сказажут потом “WTF?”.

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

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

Итак что же это за список?

Краткая версия теперь доступна на html5checklist.com (github), где можно вносить pull-request'ы.

История обновлений:

• 2015/08/11: Актуализировал рекомендации по оптимизации скорости загрузки. Добавил требование поддержки Retina. Дополнил «19. Мелочи» требованием что изображения должны масштабироваться в зависимости от размера окна.
• 2015/08/10: актуализирован список исключений для CSSLint
• 2015/07/29: актуализирован пункт №13 «плохо»/«хорошо»
• 2015/04/08: добавлено требование использования препроцессоров и рекомендация использования систем сборки
• 2013/04/25: добавлены анализаторами качества кода: CSSLint и JSHint, указан сайт подбора css font stack (спасибо @fliptheweb), мелкие уточнения (работу интерактивных элементов страницы, что не пропадает фон на высоких разрешениях, не должно быть пустых презентационных блоков, при проверках контента — пробовать удалять заголовки, менять местами блоки)
• 2013/04/24: добавил пункт об минимизации каскада (БЭМ-техники, MCSS, SMACSS), необходимости вписывания в экран моб. устройства, заменил ссылку на проверочный текст отображения стандартного html на код с normalize.css, поправил пример где в рекомендации встречался длинный каскад, упомянул про Opera на Presto и новый уровень семантики — в именах классов BEM.
• 2012/04/12: отсортировал пункты проверки в порядке важности, выделил главные, дополнил статью подробностями
• 2011/12/07: дополнил согласно доклада на WSD Минск'2011.
• 2011/07/19: добавлено про повышение надёжности вёрстки благодаря html5-тэгам, про необходимость favicon/apple-touch-icon, отсутствие багов при ресайзе textarea
• 2011/06/15: добавил пояснения какие ошибки валидации допустимы, рассказал про отсутствие официальной кнопки «HTML5 Valid» и про официальное лого HTML5 на сайте.

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

Hover Slide Effect

Демо | Урок

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

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

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

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

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

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

См. также (первая часть).

***

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

***


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

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

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

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

Преимущества дивной вёрстки, семантичной разметки и разделения содержимого и дизайна описаны десятки, сотни раз, но все-равно находятся люди, которые не понимают самой идеи html и css, пишут в коде такие ужасные вещи, как

<span style="color:blue">

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

<font color="blue">

, наивно веря в этом деле валидатору. А ведь правильный подход в написании html и css лежит на поверхности. Достаточно просто посмотреть историю развития этого языка, почитать статьи десятилетней давности и проанализировать. Я, при поддержке theshock, постаралась в этот статье упорядоченно и коротко изложить наше видение этого вопроса.

Моя прошлая статья «Обнаженный бизнес» Ричарда Брэнсона (в цитатах), похоже многим была интересна. Что же, не будем останавливаться?

Сегодня несколько слов о книге Джима Коллинза «От хорошего к великому». Это пожалуй, лучшая книга по бизнесу, среди всех, которые я читал. Она по-настоящему заслуживает права быть настольной. В какой то степени она даже не только о бизнесе. Не только о том, как построить успешную стабильную компанию, как набирать персонал или управлять проектами. Прежде всего она открывает глаза. Как на бизнес, так и на жизнь.

Я прочел эту книгу 2 раза. Второй раз (теперь, как всегда) — с маркером, выделяя цитаты. Рад ими поделиться. Уверен, тем кто знаком с книгой, будет интересно и полезно прочесть эти мысли еще раз. А те, кто книгу еще не читал, скорее всего убедятся в том, что это обязательно стоит сделать.

***

Мы тщательно изучили и просеяли компании, которые входили в список Fortune 500 c 1965 по 1999 год. И определили те компании, которым удалось осуществить переход от хороших результатов к выдающимся и сохранять эти высокие результаты в течение, по крайней мере, 15 лет. Затем мы проанализировали те факторы, которые позволили это сделать.

Стили

User Agent

Один из способов включения стилей для мобильного устройства — это использование User Agent, которую получает сервер от клиента.
Этому может помочь набор скриптов: code.google.com/p/mobileesp, а также сервис от яндекса api.yandex.ru/detector
При работе с User Agent только одна проблема — это постоянно появляющиеся новые User Agent.

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

Сказка про то, как мы биллинг проектировали

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

Когда книгу о бизнесе пишет очередной гуру, консультант или тренер с сомнительным опытом и достижениями, трудно решить как к ней относится. Другое дело прочесть мысли человека за одно поколение ставшего миллиардером, основавшего компанию Virgin в 18 лет (сейчас в нее входит более 200 компаний в 30 странах мира).

Это вторая книга Ричарда Брэнсона, попавшая мне в руки. Первая была «К черту все, берись и делай», она оставила неизгладимый след. Так что сомнений в том, чтобы прочесть и вторую — не было.

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

В последнее время читаю с маркером, выделяя для себя основные, наиболее интересные мысли. Их и предлагаю Вашему вниманию в качестве цитат автора:

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

В догонку к посту про макет бизнес модели, не менее полезный «самый короткий в мире маркетинговый план» (так его назвал автор, Келли Одел).

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

Недавно под руку попался png файл, позволяющий соориентироваться при создании бизнес-плана. Он представляет собой простой макет, в который нужно просто вписать значения, присущие вашему бизнесу. Для упрощения есть подсказки, примеры и ключевые вопросы. Так же этот документ может пригодится во время подготовки презентации для встречи с инвесторами. Под катом превью макетов и ссылки на оригинал, переведенный мною вариант и на него же в формате psd.

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

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

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

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

Хочу выделить следующие важные моменты, касающиеся бизнес плана в целом:
• Бизнес-план – это не только попытка проанализировать ваш бизнес и его шансы, но и ваше руководство к действию в ближайшем будущем после запуска бизнеса.
• Лучший способ писать бизнес-план, особенно на начальных стадиях – с листком бумаги и карандашом. И подальше от раздражителей. И только потом упорядочивание и перенос на компьютер.

Взгляд сверху

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

Итак, список: