Из нашего обзора сервиса Goodwin вы узнали, как покупаются товары через снимки айфоном печатных изданий. Увидел на развороте клевые часики, щелк камерой! – товар уже едет к тебе домой.
Уверен, что для многих такой подход в новинку. Так как любые навыки надо оттачивать, сейчас этим займемся. А заодно разыграем iPad mini Wi-Fi.
Конкурс
1. Необходимо установить приложение Goodwin.
iPhone + iPod touch: Бесплатно [Скачать из App Store]
2. Нужно найти один из журналов: Cosmopolitan, Man’s Health, Esquire, Популярная Механика или любой другой, но выпуском февраль-апрель 2014г.
3. При помощи сканера в приложении Goodwin распознать 5 продуктов, который вы хотите купить, сделать скриншот с выбранным продуктом.
4. Отправить письмо со скриншотами на почту konkurs@goodwinproject.ru с вашими комментариями и предложениями для сервиса Goodwin. Коллектив Гудвина выберет самое интересное письмо и вручит приз.
Прием работ до 21 апреля включительно.
На кону стоит iPad mini Wi-Fi.
Приз предоставлен интернет магазином Лавка Стива.
Победитель
Goodwin и интернет магазин Лавка Стива благодарит всех участников конкурса. Из всех присланных работ выделилась одна и победителем стал Иван Чернов из города Заречный Свердловской области. Его письмо ниже.
Все отзывы, найденные ошибки и предложения по улучшению сгруппированы. Надеюсь, это окажется полезным. Некоторые замечания снабжены скриншотами. Комментарии для разработчика приложения выделены курсивом.
1. Ошибки
Локализация
Если у пользователя окажется НЕ русский язык в системе – многие оповещения в приложении окажутся снабжены не внятными подсказками, а досадными placeholder-ами, вроде того, что на скриншоте:
Ошибки локализации найдены:
– во всех всплывающих окнах, включая подсказки, подтверждение добавления товара в корзину, сообщения об ошибке (скорее всего нелокализованные placeholders стоят во всех UIAlertView – стоит добавить локализацию в Localizable.strings хотя бы для английского, иначе толку от использования placeholder-ов немного)
– в вишлисте
Миниатюры в списках при скролле отображаются некорректно
Во многих списках приложения есть небольшие картинки – миниатюры товаров или схематичные иконки разделов. При скорлле заметно, что загрузка изображений
сделана не очень аккуратно – видны одни и те же картинки, а новые грузятся только при полной остановке скролла. Кроме того – уже загруженные картинки не сохраняются и не кэшируются, и грузятся снова и снова при скролле вверх-вниз по списку. Проблему нужно рассматривать с нескольких точек зрения. 1) картинки грузятся в методе scrollViewDidEndDragging: willDecelerate: или scrollViewDidEndDecelerating: – поэтому перезагрузка происходит только при полной остановке. Это неплохое решение, но только в случае корректных миниатюр – либо уже загруженных и выбранных из кэша, либо нейтральных (видных при начальной загрузке UITableView) placeholder-ов а ля “зеленый квадратик”. Сейчас placeholders для картинок установлены как-то некорректно из того, что изображалось в ячейках таблицы, пока она статично изображалась на экране (до скролла). Повторюсь – изображения нигде не сохраняются, а каждый раз грузятся заново – рядового пользователя это путает и злит. Желательно реализовать некое хранилище – скажем NSCache – и хранить загруженные картинки там, подгружая из в ячейки таблицы по мере скролла и появления соответствующих ячеек на экране. А если в кэше ничего нет – то тогда дожидаться остановки скролла и грузить только то, что нужно показать на экране. Пример реализации кэширования:
UIImage *image = [_imageCache objectForKey:@indexPath.row]; if (image == nil) {
NSString * imagePath = [self.alleimages objectAtIndex:indexPath.row]; NSURL * imageURL = [NSURL URLWithString:imagePath];
NSData * imageData = [NSData dataWithContentsOfURL:imageURL]; image = [UIImage imageWithData:imageData];[_imageCache setObject:image forKey:@indexPath.row]; }
cell.image = image;
Вы также можете посмотреть реализацию с удобным отображением и подгрузкой только тех строк, которые видны на экране, в моем очень похожем тестовом приложении.
Ошибка доступа к товару/серверу
При невозможности загрузки информации о товаре (в моем случае это была вилка для гриля: Все для дома и дачи – Famous Kitchen – Outdoor – Вилка для гриля – 18 апреля она была недоступна, 19го уже появилась) появляется сообщение об ошибке доступа к серверу. И избавиться от него невозможно – оно появляется снова и снова на каждом экране, куда бы я ни пошел и как бы ни пытался его закрыть. Помогло только закрытие приложения. Ровно та же ситуация в случе, если пропало соединение с интернетом, только ошибки льются бесконечным каскадом – окна ошибок выскакивают одно за другим. Совсем забавно если интернет потом появится:
– приложение фактически работает, но из-за нескончаемых сообщений об ошибке им невозможно пользоваться.
Отсутствующие подсказки
Алгоритм показа подсказок в режиме сканера я не уловил, но в некоторой ситуации (повторить не удалось, но что было – это точно) подсказки у сканера, который не мог распознать картинку, появляться перестали. То есть я видел только “окно” камеры.
Зависшее сохранение фото в сканере при отсутствии сети
Не удалось распознать товар – нажал на экран, как и предлагала подсказка… и все. Ромашка крутится практически вечно, потом нам все же показывают сохраненное изображение – и ни подсказок, ничего.
Выход из приложения и вход обратно при сохраненном фото в сканере
Ситуация схожа с описанной выше, но с другими последствиями. Не распознали товар – сохранили видео – увы, и так товар тоже распознать не удалось, вы можете его добавить и мы его непременно распознаем. В этот момент выходим кнопкой Home – приложение улетает в background. Заходим обратно – видим белый экран с все той же подсказкой.
2.Спорные решения и недоработки
Все мысли, высказанные в этом разделе – лишь мое оценочное суждение :)
Строка с именем интернет-магазина
Строка с именем интернет магазина и его лого сильно смахивает на строку поиска. А серый шрифт в названии
магазина путаницу только усиливает – так обычно пишут placeholder-подсказку вроде “введите искомый товар здесь”.
Лого и название интернет-магазина в той же строке визуально почти не разделены (юзабилисты негодуют) – в итоге пользователь видит две “Лавки Стива” и недоумевает вместе с юзабилистами.
Лого интернет-магазина
Также можно заметить, что лого интернет-магазина как-то странно спозиционировано (Лавка Стива прижата к левому краю, а 220 Вольт имеет от левого края солидный отступ) и зачастую не влезает в отведенную для него строку.
Подсказка сканера
Когда сканер не может определить товар – пользователь видит окно камеры, и (если телефон на русском языке) – иногда всплывает подсказка. Подсказка не дает конкретной информации – что же будет, если пользователь нажмет на экран. Возможно, стоит сказать об этом ясно – что-то вроде “Не получается? Нажмите на экран – мы сфотографируем товар и попробуем распознать сделанное фото”.
Кроме того, сама подсказка является кнопкой. Это весьма странно. Под текстом подсказки есть слово “Справка”, и действие всего элемента (с подсказкой и подписью “Справка”) соответствует лишь вызову справки. Сама справка с подсказкой никак не связана – она не соответствует контексту подсказки. При этом сам элемент кликабелен и дублирует уже имеющуюся кнопку информации i. Это решение весьма спорно и вызывает вопросы о своей оправданности.
Следующая подсказка, появляющаяся после создания фото (в случае, если товар все равно не распознан) предполагает одно действие – “добавить изображение”. Тут есть:
два спорных момента. 1) совершенно неясно – куда оно будет добавлено. 2) На любое действие предполагается противодействие. Если пользователь не хочет ничего никуда добавлять – выбора у него фактически нет. Ввиду отсутствия кнопки “отмена” логичным было бы тапнуть по любому месту экрана и вернуться в режим фотосъемки, но нет, при касании просто ничего не происходит. Единственный вариант вернуться – вспомнить о стрелочке сверху. Но, поскольку перехода между экранами не происходило, данное действие не выглядит логичным с точки зрения пользователя – стрелочка должна возвращать вас на предыдущий экран, но вы же с него не уходили, вы все там же! Возвращаясь к отсутствующей кнопке “Отмена” и вообще отсутствию альтернативных кнопок во всплывающих подсказках – это явно ограничение самого элемента интерфейса. Сама подсказка является кнопкой с естественно лишь одним действием по нажатию, но это ограничение выглядит неестественным и серьезно ограничивает функционал подобных подсказок (хотя не спорю – в случае со всплывающими предложениями товаров использование оподобных элементов интерфейса более чем оправдано)
Сканер
Вездесущность сканера поражает. Иконка приколочена гвоздями на каждом экране в NavigationBar-e, что приводит к казусам.
Если корзина пуста – нам предлагают отсканировать товар. И кнопок сканера на экране уже две. А еще можно вспомнить про боковое меню, где тоже есть сканер.
На многих экранах сканер просто неуместен. Например вот этот экран с описанием товара. Иконка информации о магазине расположена вплотную к иконке сканера. Неточное касание – и пользователь птичкой летит в сканер. А чтобы добраться до особо заковыристого товара из каталога могут понадобится недюжиные усилия и хорошая память. Это только пример неоправданного наличия иконки сканера – она в принципе на многих экранах не нужна, достаточно пункта в боковом меню, хотя это, повторюсь, оценочное суждение.
Иконка i в описании магазина
Но продолжим изучение все той же страницы – иконка i и вся строка с именем и
лого магазина при переходе на собственно страницу информации о магазине не исчезают и не изменяются. В итоге i становится мертвым грузом, так как не несет
более никаких функций. Кроме того, смущает многозначность иконки. Она может вести на страницу с информацией о магазине, а на странице сканера она показывает, как правильно фокусироваться на изображении товара. Может, как-то визуально их различить? Хотя это больше к разделу “Идеи”
Загрузка изображения товара – ромашка и placeholder
При просмотре конкретного товара сервис загружает его изображение. Непонятно следующее – во время загрузки изображения на его месте крутится ромашка – это логично. Но зачем после этого показывать на секунду стандартный placeholder (зеленый квадратик) и уже только потом – само изображение?
Чат с техподдержкой
Этот экран выглядит достаточно странно. При первом входе было бы неплохо в качестве фона показать подсказку – мол, для начала разговора нажмите там-то/ специалист сейчас онлайн и готов
ответить на ваши вопросы/мужчина, у нас обед! – или что-то в этом духе, но не пустой экран. И –
на том же экране чата – скролл. Я могу понять скролл сверху вниз и последующий показ ромашки – это для того, чтобы подгрузить историю разговоров с техподдержкой. Но зачем скорлл снизу вверх с той же ромашкой?
3.Вопросы и мелкие спорные моменты Витрина и каталог
В боковом меню нам доступны помимо прочего два пункта – “Витрина” и “Каталог”. С каталогом все понятно, но зачем все-таки нужна “Витрина”?
Товары из разных интернет-магазинов
При попытке покупки двух товаров из разных магазинов первый товар выбрасывается из корзины. Вы честно предупреждаете, что два товара из разных магазинов в корзине находиться не может, но такое решение вызывает глубокое недоумение. А если нет консолидации покупок – то в чем смысл корзины? При этом само предупреждение появляется только “по факту”, когда пользователь уже порядочно порыскал по разным отделам, и вот нашел было что-то по душе – и в шаге от “живых денег” (читай – оплаты покупки) вы даете ему от ворот поворот. Это печально. Если без этого совсем никак – ну по крайней мере можно не пускать пользователя в другие магазины, пусть в этом отоваривается, но хоть не тянуть с “радостным” известием до последнего.
Валюты
У цен не указаны валюты. Это может быть оправдано при использовании только на одном рынке (хотя все равно некая цифра без привязки к чему-либо – не самая очевидная вещь), но, как я понял, вы собираетесь выходить на международную арену, а там совсем не рубли. И потом, если сейчас завязать все элементы интерфейся к простым цифрам – потом для знака валюты может не оказаться предусмотренного места, и интерфейсы поплывут (каркаю).
Описания товаров, компаний
Многие описания неточны или, кхм, явно откуда-то скопированы (порой без пробелов). Стоит навести порядок и аккуратно заполнить каталоги товаров и компаний. У некоторых товаров отсутствуют изображения. Список всех неточностей не приведу – очень уж он был бы большим.
Нагрев
Заметил, что во время работы приложения у меня буквально раскалился iPhone, хотя далеко не самый старой модели (5S), и мощностей в нем ого-го. Конечно, это очень спорно и субьективно – возможно наложение массы факторов в моем конкретном случае… Но я бы проверил с помощью Instruments – как приложение использует аппаратные ресурсы, особенно в режиме сканера. Вдруг где-то затесался (простите меня!) вечный цикл или неудачная рекурсия и процессор работает на максимуме?
Загрузка изображений на распознавание
Во время загрузки изображения (куда-то) на распознавание оно остается на экране с крутящейся поверх ромашкой. Я проверил – этот вызов асинхронный, неблокирующий – так почему бы не закрыть это окно сразу, вернувшись в режим
фотографирования? А когда изображение загрузится – все равно появится соответствующее уведомление. Пока же робкий пользователь будет томится ожиданием и ждать, пока айфон (по GPRS, ох) загрузит изображение куда-то туда. А прервать некоторые и побоятся – вдруг загрузка автоматически отменится?
4.Идеи
…побольше, побольше!
Конечно, добавить больше товаров в базу сканера. Я пока более-менее успешно распознал тольо парфюм, а вот ни одни из дорогих моделей часов распознать не удалось.
Инструкция
В приложении явно не хватает раздела с инструкцией или хотя бы приветственного экрана (появляющегося при первом запуске с возможностью повторно просмотреть при последующем запуске), с объяснениями – что где находится и как что делать. Например – режим сканера. Что можно и нужно фотографировать? Страницы журналов? Или реальные товары? Или штрих-коды? А мою подругу в новом платье он распознает? А как вызвать боковую панель? Пользователь редко помнит описание приложения из AppStore, ему нужно запустить и пользоваться.
Сканер
На время сканирования было бы неплохо добавить какой-то фидбек пользователю. Простейший вариант – анимация “сканирования” изображения на экране – эдакая зеленая полоса, ползущая сверху вниз по экрану. Все лучше чем простое “ничего”, когда пользователь видит интерфейс камеры и все.
И я бы еще раз хорошо подумал вместе с дизайнером и юзабилистом – как орагнизовать процесс сканирования и распознавания наиболее очевидным способом. Правило трех действий все еще в силе.
Рассмотрим usecase – пользователь читает журнал и видит, скажем, рекламу хороших часов. За три действия ему нужно найти эти часы с помощью приложения. Действие 1 – открываем приложение, действие 2 – наводим на рекламу (по экрану проползает зеленая полоса сканера, но рука у пользователя нетвердая, ничего не нашлось с первого раза). Каким должно быть действие 3? Если на экране появится четкая и внятная подсказка-руководство вроде “Распознать изображение не удалось – коснитесь экрана, чтобы сделать фото и провести анализ сделанной фотографии” – то действием 3 будет касание экрана. Дальнейшие возможные усовершенствования этого экрана были обсуждены выше.
Где я?
Нигде не дан ответ на главный вопрос – что такое Goodwin? В магазине AppStore написано следующее – “GOODWIN – Визуальное распознавание и шопинг” , но это предложение не связно! Можно добавить всего одно слово – и станет очевидно, что это такое и с чем его едят. Например: GOODWIN – сервис для визуального распознавания и онлайн-шоппинга. Понимаю, может звучать простовато и быть похожем на придирку к мелочам, но одновременно такие простые вещи ведут к мгновенному пониманию происходящего.
Читалка
Идея приложения – помогать совершать покупки и находить товары по фотографии. Проблема со сканером – не всегда точные срабатывания и слабый фидбек в случае с отсутствием каких-либо результатов поиска (пользователь банально ничего не видит – только подсказку). А, может быть, встроить читалку гламурных журналов? С автоматическим сканированием страниц и автоматически появляющимися предожениями покупок. Это идея для версии для iPad, безусловно, но ведь мысль занятная: пользователь читает Esquire, а на странице с рекламой снизу нежно выплывает окошко, предлагающее купить вот этот роскошный парфюм от D&G, не слезая с табуретки.
Соцсети
Социальность – это бич и чума современного интернета. Почему не дать пользователю похвастаться покупкой в твиттере, фейсбуке итд? Заодно добавить в конце записи правильные хэштеги (#покупаюЛегко #Goodwin) – и понемногу завоевываем аудиторию.
Спасибо.
17 комментариев