Избранное

cover

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

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

Как рассчитать точный срок?

Первое с чего нужно начать — научиться рассчитывать точные сроки во всём. Этот навык трансформировать в привычку и делать на автоматизме.

«В этом году я… Как изменить привычки и сдержать обещания или сделать то, о чём вы давно мечтали» М. Дж. Райн

Пример. Вы взяли лодку в прокат на 2 часа. Как вернуться вовремя? Поставьте таймер на 1 час и плывите в нужном направлении, когда таймер сработает, это значит вам пора возвращаться. Мы исходим из того, что если в одну сторону вы потратили 1 час, то обратный путь у вас займет примерно такое же количество времени.

Пример. Как рассчитать сколько времени на прочтение займет та или иная статья или книга. Взять секундомер и засечь сколько времени вы потратили на одну страницу, затем умножить на количество страниц.

В проекте Любимая Работа я придумал писать перед каждой статьёй время прочтения. Был смешной случай, когда бухгалтер спросила, я должна уложиться в это время?

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

Пример микропрототипа проекта.

Дисциплина. Если вы договорились с самим собой решили применять принцип ФФФ и не сдвигать дедлайны, то это вас должно дисциплинировать. Держите в уме одну вещь, если вы работаете дольше, вы зарабатывате меньше.

Зачем нужна часовая ставка?

Если вы научились или умеете рассчитывать точные сроки выполнения задания, то часовая ставка поможет вам точно оценить бюджет проекта. Умножаете количество часов на часовую ставку и получаете бюджет. Другие расчеты, например, цена за страницу сайта или приложения, бесполезны. Я не понимаю, как можно писать и предлагать сделать главную страницу сайта за $2000 и 7 дней, а логотип $1000 и 7 дней? Получается, что для дизайнера, который это написал делать логотипы не выгодно.

Как договориться о фиксированных дедлайнах с клиентом?

Сделать первый шаг всегда сложно, поэтому не используйте стандартных договоров и предоплаты в 50% вы ничего не знаете, как всё пойдёт. Возможно, вы не справитесь и придется вернуть предоплату или вы сделаете все работу и клиент вам не заплатит остаток. На обложке кадр из фильма «Железный человек» помните, что с ним случится через пару минут?

Разбейте проект на этапы, недельные итерации и приступайте только за 100% предоплату этапа. Например, вы разделили работу на 10 этапов. Для клиента гораздо легче заплатить 10% от проекта за первую итерацию и получить результат, хотя бы промежуточный, чем платить сразу половину и ждать когда вы всё сделаете. Для дизайнера выгодно получить эти 10% от стоимости проекта, так как это 100% оплата первого этапа, никаких рисков. У заказчика есть право сказать «нет» и остановиться в любой момент, если что-то пошло не так, при этом он рискует меньшей суммой. У дизайнера есть возможность спокойно работать и принять «нет» от заказчика, без рисков, так как этап оплачен.

Договор и шаблон задания, которые я использую

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

Итог

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

cover

Как часто в жизни вам приходиться сталкиваться с тем, что слова расходятся с делами? Ищешь дизайнера, находишь, видишь отличные работы в портфолио, отправляешь 50% предоплаты, начинаешь работать и понимаешь, что он не справляется?

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

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

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

О том, как полюбить клиентов лучше всего написано в книге «Клиенты на всю жизнь» Карл Сьюэлл, Пол Б. Браун

Почему портфолио обманчиво?

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

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

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

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

Почему так дорого?

Соблазн сделать дешевле, еще одна частая ошибка заказчика. Казалось почему бы не сэкономить? Задайте себе вопрос почему, и за счёт чего одна и та же работа стоит дешевле? Для дизайнера, который предлагает цену ниже рынка, задача не в том, чтобы запустить проект вовремя, для него достаточно получить предоплату, возможно на вторую часть он и не рассчитывает. Получил предоплату, сделал что-то, на этом его миссия заканчивается. Экономически не целесообразно работать ниже рынка, будут убытки. Проблема в том, что дизайнер не понимает или понимание приходит в процессе работы. Таким образом, дизайнер не в состоянии внимательно прочитать задание и реально оценить свои силы, назначить правильную цену и срок. Это плохой знак.

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

Управление проектом

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

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

Посмотрите примеры прототипов приложений: Телепрограмма, Гольф.

Интерактивный прототип приложения «Гольф 24 7»

Интерактивный прототип приложения «ТВ программа»

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

Как сделать первый шаг?

Обращайте внимание на то, что делает дизайнер. Договоритесь о встрече или скайп-звонке. Как он договаривается, как выполняет договоренность. Если дизайнер предложил созвониться после обеда это плохой знак. Если вы договорились на 14:00, а он опоздал и не предупредил значит у него проблемы с дисциплиной и самоорганизацией. Хотя на словах он будет ответственный и дисциплинированный. Проверьте насколько он внимательно прочитал задание.

Кадр из документального фильма Man on wire

Как должно быть? Разделите работу на короткие этапы, договоритесь о взаимодействии и дедлайне. В каком виде вы получаете результат. Внесите предоплату за 1 этап и посмотрите результат. Таким образом, вы рискуете не половиной бюджета, а например его десятой частью и имеете возможность проверить, как работает дизайнер и понять стоит продолжать или нет.

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

cover

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

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

Как получить заказ с Бихенса?

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

  1. Собирайте крутое портфолио
  2. Будьте активны, пишите комментарии, ставьте лайки, собирайте коллекции
  3. Делайте первые два пункта регулярно

Как собрать крутое портфолио?

Делайте прямо сейчас, не надо ждать заказчика. Посмотрите вокруг, выберите то, что вам по душе и сделайте. Переделайте Википедию, Гугл, Яндекс сделайте это лучше, объясните почему это лучше и представьте все это наилучшим образом. Найдите интересные тестовые задания и сделайте их. Необычные задания есть на сайте Бюро.

Пример моей версии приложения «Телепрограмма»

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

Итог. В портфолио должны быть крутые работы. Работа должна стать лучше после редизайна, удобнее проще и понятнее.

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

У меня есть портфолио на Бихансе и сайт

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

Как привлечь внимание к вашей работе?

Письмо. Пишем письмо, нормальное письмо с нормальной просьбой и рассылаем. Напишите несколько шаблонов писем. Рассылайте. Смотрите реакцию. Отвечайте и говорите спасибо. Как правило, большинство людей реагируют положительно и выполняют вашу просьбу ведь это не сложно!

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

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

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

Как сделать, чтобы работу отметили?

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

Заметка о том, как отметили мою работу.

Ответ итальянца Андреа. «Однажды я проснулся и увидел, что моя работа отмечена! Ничего более.»

Статистика

Через пару месяцев вы должны увидеть результат, по крайней мере я его увидел. Мои рекомендации не идеальны, возможно у вас получиться лучше и быстрее. Соотношение к ответным комментам составляет 14,9% это хороший показатель, при условии, что вы тратите только своё время. Остальное к вам возвращается заказами.

Обратите внимание на статистику, сколько вы отдали и сколько получили.

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

Сейчас у меня достаточно заказов. Я готов поделиться и делегировать часть работы. Мне нужны помощники. Кому интересно напишите мне письмо. Оставьте комментарий с вопросом или пожеланием. Мне важно знать насколько полезна для вас эта статья.

Правильное мобильное приложение «Телепрограмма», интерактивный прототип, красивые скриншоты приложения и интересная история.

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

Как я узнал об этой интересной задаче?

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

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

Свайп верх и вниз переход по каналам. Быстро смотрим, что интересного сейчас на всех каналах.

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

Вправо то что будет, влево то, что было.

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

Фильтр по некоторым параметрам.

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

Моя любимая кнопка включить телевизор!

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

Интерактивный прототип можно тестировать на айфоне.

P. S. История только начинается. Я выложил эту работу у себя на сайте 10 дней назад, а сейчас её там нет. Пропала! Остался только кэш в Гугле. Сайт использует движок Карго и пропала только одна работа. Я написал в тех поддержку и жду ответа. Я не понимаю, что произошло. Это случайная ошибка или я нарушил чьи-то права?

Профессиональные фотографии отличного качества, нормального размера, бесплатно.

Эта подборка сайтов с фотографиями будет полезна для тех, кто занимается веб-дизаном или пишет в блог. Добавляйте в закладки пользуйтесь на здоровье. Спасибо Дастину Сеносу за  пост и подборку. Я не удержался и забрал себе этот список.

Stock photos that don’t suck

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

 

  1. Little Visuals
  2. Unsplash
  3. Death to the Stock Photo
  4. New Old Stock
  5. Superfamous requires attribution
  6. Picjumbo
  7. The Pattern Library
  8. Gratisography
  9. Getrefe
  10. IM Free requires attribution
  11. Jay Mantri
  12. Public Domain Archive
  13. Magdeleine
  14. Foodiesfeed
  15. Picography
  16. Raumrot
  17. ISO Republic

 

Добавилось. Примеры фотографий с сайтов Death to the Stock Photo, Unsplash у фотографий приличный размер 5000 на 3000 пиксел, поэтому они не хотели загружаться, пришлось уменьшить и загрузить.

Лицензионное соглашение с сайта Unsplash

14 октября 2014, 16:32

Апп разбор приложения meetU?

Сергей Зуев спрашивает:

Текущая версия приложения MeetU работает, но что-то с дизайном не то, не пойму, что именно.

Общее впечатление

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

Регистрация

Приложение предлагает войти с помощью ФБ, ВК или «Войти через email». Зарегистрировался через ФБ, оттуда подтянулся мой профиль, фото и интересы. Всё как обычно. Что значит «Войти через email» не понятно, то ли это регистрация, то ли вход. Кстати выйти из приложения нельзя.

Светлый текст плохо читается на светлом фоне, а на карте странно звучит текст.

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

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

Основной раздел

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

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

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

Личный кабинет

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

Обратите внимание на дату рождения в селекторе.

Изменения даты рождения можно сделать лучше, сам того не желая я изменил дату! При тапе на дату рождения появляется селект с сегодняшней датой, как такое возможно? Есть только кнопка Готово, на которую я нажал не меняя дату и дата изменилась. Если я не изменял дату, зачем система сама изменила? Кстати я уже видел девушек, которым 0 лет.

Зачем мне покупать 3 месяца по 339 р. если тут же продаётся 3 месяца по 316 р.?

Дизайн

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

Иконка в аппсторе выглядит не очень

Русский язык

Например, в личном кабинете есть подраздел «Me» в профиле девушек есть «Report Abuse» на главной «Terms & Conditions» почему бы не написать вместо этого по-русски «Я», «Пожаловаться», «Правила»?

Итог 3/5

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

cover

Как правильно переносить данные из таблиц на экран смартфона.

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

Особенности восприятия информации с бумаги.

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

Эту таблицу нужно перенести в приложение на экран айфона в портретном режиме. Очевидно, что она не помещается, да и читать её в таком виде трудно.

У человека тоже есть особенность, он может воспринимать в единицу времени ограниченное количество данных. Человек не может охватить всю таблицу сразу, состоящую из 7 строк и 3 колонок, поэтому он использует палец, как указку. Чтобы читать таблицу нужно приложить усилие и самому искать нужные значения. Для удобства восприятия вся информация разбита на части, посмотрите любую газету, например «Нью-Йорк Таймс». Колонка и абзац оптимальная для восприятия человеком часть информации.

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

Подробнее о локусе внимания читайте в книге Джефа Раскина «Интерфейс» стр. 35

Особенности экранной графики мобильных устройств.

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

Реальная бумажная таблица слева и результат переноса справа. Есть разница?

Как правильно перенести таблицу на экран смартфона?

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

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

Оптимальный блок данных

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

Исходная таблица не помещается, но строка или оптимальный блок данных великолепно вписался в экран айфона.

Строки и столбцы

Определяем, где лучше поставить ключевые значения строки или столбцы. В данном случае годы с 2000 по 2013 располагаются вертикально и уходят вниз это не правильно. Шкала времени традиционно располагается горизонтально слева направо по оси Х посмотрите проигрыватель Ютуб, прогресс бар загрузки и другие примеры. Используем этот приём.

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

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

Динамика

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

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

Итог.

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

Добавилось. Оцените приложение на Бихенсе

Открываю рубрику разбора мобильных приложений

Спрашивает Ксения Назарова:

Какие на ваш взгляд недостатки в приложении Lamoda и как бы вы их исправили?

Первое впечатление

Захотелось избавиться от таббара и оставить больше места для товаров. Корзину перенести в менюбар в правый верхний угол, а каталог и всё остальное спрятать в иконку «Бургер» в левом верхнем углу.

Что мешает мне добавлять в избранное, а синхронизировать с сайтом потом? Это полезное и важное действие, которое должно работать в любом режиме.

Организация каталога

В каталоге избыточна кнопка «Назад» она не даёт понимание того куда именно назад ты попадёшь. Например, если ты в разделе Обувь, то вместо «Назад» нужна информативная кнопка «Мужчинам». Дублирование выбора подкатегорий не очень хорошее решение. Тап на заголовок «Обувь» и выпадает список подкатегорий (Кеды, Дутики и луноходы, Сабо) или свайп влево и вправо перемещает нас по тем же категориям.

Обратите внимание на кнопку «Назад» на первых двух экранах, она приведет в разные места, что мешает в первом случае написать «Мужчинам», в во втором «Обувь»?

Навигацию сделать более информативной и добавить количество подкатегорий. Например, в Каталоге 4 подкатегории (Женщинам, Мужчинам, Детям, Бренды)

Каталог 4 → Мужчинам 8 → Обувь 18 → Кеды 54

Фильтры

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

Карточка товара

В карточке товара можно смело убрать таббар и вместо него поставить полезную и самую важную кнопку «В корзину». Кнопка может быть фиксированная или залипать при прокрутке. Здорово, что тебя не заставляют выбрать размер прежде, чем ты нажмешь кнопку «В корзину», размер можно уточнить при оформлении заказа.

Избранное по смыслу близко к кнопке «В корзину» поэтому их нужно сгруппировать и показывать рядом.

Корзину из таббара надо переместить в правый верхний угол экрана в менюбар.

Поиск

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

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

Поле поиска с ключевым словом надо оставить, а результаты показывать компактно, «Категории и фильтры» нужно убрать из результатов поиска. Это же поиск! Я могу уточнить запрос и написать «Скидки+кеды», затем «Скидки+кеды+красные». Было бы здорово показать количество найденных товаров.

Корзина и оформление заказа

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

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

После оформления перезвонили мне мгновенно это значит отличный сервис. Далее мне рассказали про условия доставки их всего три:

  1. Почта России +2% от стоимости за наложенный платёж 17 дней
  2. Курьер +290 р. с возможностью примерить и отказаться или оплатить на месте, спасибо Тони Шею и его книге «Доставляя счастье»
  3. Постомат

Итог 3 балла из 5

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

24 июля 2014, 13:41

Собрал портфолио

Зарегистрировал домен andrerevin.com и собрал портфолио.

Лучшие мои работы среди них отмеченная на Бихенсе сообществом Веб Сервед. Отличный сервис для дизайнеров предоставляет платформа cargocollective.com я выбирал и тестировал около двух месяцев, сейчас это лучшая система на мой взгляд среди подобных, например Prosite Behance.

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

Четкий, стильный и минималистичный дизай, крутой интерфейс для редактирования и создания разделов, стоимость в год $ 60. Я в восторге и напишу об этом подробнее, а сейчас посмотрите портфолио.

15 мая 2014, 13:54

I've been featured on Web Design Served

Редди отмечена на Бихенсе среди лучших работ по веб дизайну

26 апреля 2014 я сделал дизайн темы «Редди» Reddy Theme on Themeforest. Затем выложил эту работу на Бихенсе Reddy Theme on Behance. Работа получилась крутая, я в восторге. Я написал более 40 писем с приглашением посмотреть мой дизайн и оценить. Получил много 558 лайков и 53 комментария. Благодарю мою жену за крутой промоушен, всех дизайнеров с Бихенса за поддержку.

Поддержите меня на Бихенсе Reddy Theme on Behance

Цитата

Congratulations Andre,
You've been featured on Web Design Served.

Our curatorial team features a small number of projects to appear on the front of our gallery each day. We only pick the best work that effectively promotes the Web Design Served community.

Keep creating great things!
The Web Design Served Curatorial Team

Новость
Утром 11 мая в воскресенье я увидел зеленую ленточку в своём аккаунте на бихенсе, и только потом письмо от Оскара Рамос Ороско который поздравлял меня с тем, что моя работа выставлена в Веб Дизайн Сервед комьюнити. Как вы можете прочитать в письме, команда Веб Дизайн Сервед выбирает только самые лучшие работы в области веб дизайна среди них сайты для известных компаний Тойота, Найк, Гербер.

Скриншоты

Ctrl + ↓ Ранее