Людвиг-в-ж-ж (grosslarnakh) wrote,
Людвиг-в-ж-ж
grosslarnakh

Дизайн-на-коленке: левел 2

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

Краткое содержание предыдущих серий
Мы продолжаем делать сайт lookatmyapps.ru, стоя одной ногой на красивом плече айпада, другой ногой на могучем плече фэйсбука. Есть понимание того, что сделано не так, будем выводить сервис в люди, и все это в прямом эфире. Сейчас сервис посещают 44 уникальных посетителя в сутки, свой список программ на нем держат 25 человек.


Дизайн-проблемы, которые мы решим в прямом эфире этого блога


– Людям совершенно непонятно, про что этот сервис;

– Начало работы сейчас выглядит как отстой;

– Нужно добиться того, чтобы в сервис прислали свои письма Тема Лебедев и Тимур Бурбаев;

– Есть особенности при работе с Фейсбуком, и, похоже, мы выбрали не ту парадигму. Тоже дизайн-проблема, и тоже не смертельно.

Поехали.


Про правильно подобранные названия

Главное оружие дизайнера - буквы. Дизайн без картинок работает заебись. Без картинок сделаны "Война и мир", "Страна Чудес без тормозов или Конец Света", "Башорг" и "Зима тревоги нашей" - и ничего, работают. Важно правильно подбирать слова. 

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

Итого. Попробуем правильно все переназвать, поглядим на результат.


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

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



Про объясняющие картинки

Егор Жгун придумал, что надо сделать какое-нибудь видео, но меня ломает делать скринкасты неустоявшегося интерфейса на нескольких языках – у нас уже есть ломаный английский, русский и болгарский (потому что Личи не нравилось, что все не по-болгарски написано, и он занялся переводом на болгарский. Если внизу страницы apps.facebook.com/lookatmyapps/ выбрать болгарский язык, то появятся забавные для русскоязычного глаза слова.)

Потом Егор придумал, что можно нарисовать комиксы, на которых кто-нибудь объясняет Различные Аспекты Сервиса. Потом ему стало скучно, и он придумал, что ему должно быть интересно, и надо рисовать, например, меня и, например, Тему. Он должен будет появляться в конце каждого сервиса и говорить "Это говно." Тут пришел Лебедев и напомнил про Антикульт.

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

В итоге Егор что-нибудь обещал нарисовать когда-нибудь. 


Фейсбучные технологические нюансы


Первый. Если на странице встречается кнопка "Лайк", то она вставляется через айфрейм - получается небольшой сайт в сайте. Если у вас на странице нарисовано 150 иконок программ, и у каждой стоит кнопка "Лайк", то у вас 150 сайтов в одном. Рендерится все это, конечно, безобразно долго. Валера предложил два варианта:
– убрать кнопку;
– нарисовать псевдо-кнопку, а при наведении на псевдо-кнопку подставлять айфрейм.

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

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


Про начало работы человека в системе

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

Про остальное попозже напишу – сейчас две картинки и немного Знания. 

Mockingbird

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



Проект можно сохранить, отослать клиенту на зазыр. Можно дать коллеге права и вместе с ним двигать по полю что хотите. Рекомендую, классная вещь. Например, ранний тыц-дыц.

Меняем дизайн дальше

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



Если кто хочет себя попробовать в проектировании – велкам, берите на растерзание, попробуйте сделать лучше. Я имею в виду блок-схему, без выдрачивания. Мне пока интересно возиться с этой темой, я прокомментирую варианты. Если что-то будет удачнее, чем тут, то честно скажу, что молодец и бескорыстно приму идею в дар. В этом макете, например, я уже сразу вижу четыре вещи, которые можно подтянуть.
Tags: lookatmyapps, mockingbirds, Валера Яцко, Егор Жгун, быстрый дизайн, есть секрет
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 17 comments