Dev Story Раскраска: Динозавры. История об интерфейсах

Информатор avatar | 7
FavoriteLoading В закладки
Раскраска: Динозавры. История об интерфейсах

ТЕКСТ: СТАНИСЛАВ ВЕРИГО (DECAFE). Идея сделать детские раскраски появилась сразу же, как только стало понятно, что на каждом айпаде сотрудника студии, у которого есть ребенок от четырех до семи лет, установлено как минимум, несколько раскрасок. А так как, всегда полезней учиться на чужих ошибках – мы устроили опрос наших маленьких тестеров, что нравится и не нравится в раскрасках, в которые они играют.

Что не нравится
1. Плохой контент. Неинтересный и плохо подготовленный, например, когда лезут пиксели такого размера, что непонятно откуда вообще авторы драли эти картинки.
2. Отсутствие самых обязательных опций: undo, сохранения картинки, чтобы можно было продолжить рисование потом, отсутствие чистого листа чтобы порисовать, понятная навигация, которая не даст случайно потерять результат рисования.
3. Банальные тормоза.
4. А самое раздражающее – неудобный, непонятный интерфейс (!), мешающий рисованию.

С пунктом 1 справиться проще простого – «прямые» руки дизайнера и иллюстратора создают альбомы авторских рисунков; а пункты 2 и 3 побеждаются квалификацией программистов.

А вот при разработке интерфейса для аудитории от четырех до семи – начинают работать совсем другие законы, чем для взрослых. Ребенок в четыре года и в семь лет совершенно по разному «договаривается» с планшетом, так что требуется поиск компромисса между простотой и функциональностью. Тем более, что нам хотелось сделать приложение, которое будет еще и развивать таланты ребенка – начинаем с заливок областей тапом, потом с маминой и папиной помощью учимся рисовать пальчиком, выбирать толщину кисти и так далее.

Размещение блоков интерфейса

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

Варианты панели раскрашивания

Пробуем разные варианты: пограничные «сложный» и «упрощенный» – рисуем и тестируем.

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

Так что истина осталась где-то посередине. Ее мы и осуществили в очередном прототипе:

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

Видео с тестов схемы интерфейса и одного из финальных вариантов:

Иконки

Выбрали образы для основных иконок-функций. Традиционные иконки против объектов.

Объекты конечно сразу понятны. Но они не всегда отвечают смыслу функции. Ластик– хорош, а для undo объект придумать непросто.

Стилистика интерфейса

Теперь надо определиться со стилистикой. Варианты: «Photoshop», «Деревянная коробка» и «Мультяшный».

Коллективным голосованием детей был выбран вариант «Деревянная коробка с красками». Этот вариант был еще немного усовершенствован и его можно видеть в наших приложениях.

Динозавры vs. Динозаврики

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

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

Итак, мы разделили раскраску на «более взрослую» и версию «для самых
маленьких». Посмотрите что у нас получилось.
Видео «Динозавры»

Видео «Динозаврики»

Итоги

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

Раскраска. Динозавры для iPad Full: $0.99 [iTunes link]

Раскраска. Динозавры для iPad Lite: Free [iTunes link]

Раскраска. Динозаврики для iPad Full: $0.99 [iTunes link]

Раскраска. Динозаврики для iPad Lite: [iTunes link]

Данная история опубликована в рамках рубрики Developer Story, где разработчики делятся секретами своей внутренней кухни.
1 Звезд2 Звезды3 Звезды4 Звезды5 Звезд (Проголосуйте первым за статью!)
undefined
iPhones.ru
ТЕКСТ: СТАНИСЛАВ ВЕРИГО (DECAFE). Идея сделать детские раскраски появилась сразу же, как только стало понятно, что на каждом айпаде сотрудника студии, у которого есть ребенок от четырех до семи лет, установлено как минимум, несколько раскрасок. А так как, всегда полезней учиться на чужих ошибках – мы устроили опрос наших маленьких тестеров, что нравится и не...
Прокомментировать

🙈 Комментарии 7

  1. humster avatar
    humster13 марта 2012
    0

    «…для нас было важно, что нарисовать своих динозавров можно без лицензии…»
    Своих ли? Некоторые динозавры подозрительно сильно похожи на сородичей из одноимённой раскраски Махаон.

  2. Костик avatar
    Костик13 марта 2012
    0

    Не стал бы рекомендовать детей вообще подпускать к компьютерной технике, проблем потом с психикой не оберешься, стоит ли? Не проще купить в детском мире раскраску и посидеть вместе с ним?

    Ираклий avatar
    Ираклий13 марта 2012
    0

    @Костик, на дворе 2012 год и компьютеры – неизбежная часть повседневной жизни. Дети должны быть с данным инструментом на ТЫ. С другой стороны такие программы и помогают воспринимать компьютер (АйПад) как инструмент, а не только устройство для просмотра мультфильмов. Обычная раскраска тоже нужна. Но она воспринимается больше как игра – макнуть кисточку в воду, в краску и намалевать на бумаге. На АйПаде больше интерес к самой картинке. Мое субъективное мнение, но подверженное наблюдением за своим детем.

    Костик avatar
    Костик13 марта 2012
    0

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

    KitOBoy avatar
    KitOBoy13 марта 2012
    0

    @Костик,времена меняются. Психологи не росли в сегодняшнее время, и книги, по которым они учились не писались в наше время. Если все вокруг завязано на компьютерах, то почему детей нельзя к ним подпускать? Согласен только по поводу проблем со зрением, но чем отличается раскраска на айпэде и бумаге? Имею ввиду по наполнению, понятно, что моторика развивается по-разному.

    kr1k avatar
    kr1k13 марта 2012
    0

    @Костик, не правильно.
    Ребенку, особенно маленькому, свойственно подражание. Поэтому, не подпуская ребенка к компьютерной технике, при этом лично ее используя и постоянно показывая “пример”, ты ограничиваешь ребенка как личность, рано или поздно это начнет его “напрягать”. И результат будет ровно противоположный.
    Другое дело – внятно объяснять, что родителям нужно использовать технику для скучной работы и т.д. и в эти моменты предлагать поиграть в конструктор/куклы/солдатиков и пр.
    Но на некоторое время, показывать что-нибудь образовательное и развивающее на том же айпаде, конечно, стоит, только в меру.

    Костик avatar
    Костик13 марта 2012
    0

    @kr1k, читайте матчасть, как говорится, яндекс вам в помощь! Уверен, что вы не найдете ни одной статьи, в которой, как вы пишите, описывается ПОЛЬЗА… Для разнообразия, могу порекомендовать визит к детскому невропатологу. Уверен, вы много нового узнаете.

Вы должны авторизоваться или зарегистрироваться для комментирования.

Нашли орфографическую ошибку в новости?

Выделите ее мышью и нажмите Ctrl+Enter.

Как установить аватар в комментариях?

Ответ вот здесь