Элиот Стокс - Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки

О рецензенте

Дениз Джекобс (р. 1968) родилась в Спрингфилде (штат Огайо, США). Окончила Стэндфордский университет, Университет Вашингтона в Сиэтле и Университет Поля Валери во Франции. Ее жизненное кредо: «Глаза боятся – руки делают». Дениз живет в небольшом домике недалеко от города Корал-Гейблс в Майами (штат Флорида, США). Она почти полностью обустроила ландшафт своего дворика в 2009, но затем села писать книгу. Она с тех пор так и не смогла вернуть своему саду былую славу, но все же у нее растут банановые деревья, а соседских авока-до – просто в изобилии.

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

Самый важный урок, который усвоила Дениз, – нельзя объять необъятное.

Стремиться стать суперчеловеком – слишком завышенная планка. Это подходит больше к жизни, чем к работе. Ее личное пожелание читателям: «Следуйте своей мечте и страсти, мечтайте глубоко. Тогда ваша жизнь изменится в лучшую сторону».

Размышления о мобильном опыте использования в дизайне: сетевой или «родной»[102]?

Автор: Арэл Балкан

Рецензенты: Джош Кларк, Андерс М. Андерсен

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

Как дизайнеры опыта взаимодействия, мы создаем виртуальные продукты. Более того, так как дизайн оборудования и дизайн программного обеспечения по существу связаны и нераздельны, грань, которая разграничивает дизайн продукта и интерактивный дизайн (если она вообще существует), – расплывчатая.

Веб-разработчик – это разработчик опыта пользовательского взаимодействия

По существу, веб-разработчик – это разработчик, создающий опыт взаимодействия, владеющий специальными знаниями о средствах Интернета. В качестве материалов веб-разработчик использует основные (HTML, CSS, JavaScript) и вспомогательные (LESS, Stylus и т. п.; HAML, Jade и т. п.; jQuery, MooTools и т. п.) фреймворки Сети и их компоненты. Эти фреймворки и компоненты внутри них созданы из кода. Того самого, который определяет границы дизайна и поведение этих материалов.

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

Мы интерактивные разработчики и нас интересует не просто эстетика интерактивного объекта, но и его поведение.

Особенно это важно, когда вы разрабатываете приложения (которые являются объектами, на основе поведения) в противовес разработке документов (которые являются объектами, на основе содержания).

Дизайн документов против дизайна приложений

Разработка интерактивного документа для Сети – особенно адаптивным способом, – требует специальных знаний. Как минимум нужно понимать принципы адаптивного дизайна и прогрессивного улучшения[103]. Рисование милых картинок – это искусство, а не разработка.

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

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

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

Разработка в первую очередь для пользователей

При создании продукта дизайн руководит разработкой, а разработка одушевляет дизайн. Это цикличный, повторяющийся процесс, цель которого постоянное улучшение продукта для лучшего удовлетворения нужд пользователя[104].

В основе каждого решения, которое вы принимаете по своему продукту, должны быть потребности пользователи. В первую очередь вы должны думать об этом, и только потом о себе. Другими словами, практикуйте то, что мы называем «outside-in design» («дизайн “снаружи внутрь”»). Думайте о нуждах пользователя и их контексте, создавайте то, что он увидит и с чем соприкоснется, а уж потом переходите к решению проблем, которые предстанут перед вами.

Цель главы

Два основных решения, над которыми вы должны «поломать» голову во время процесса разработки, – делать ли продукт кроссплатфор-менным или «родным».

Ваш первый вопрос в новом проекте: «Какую использовать серверную технологию, или как должна выглядеть схема базы данных?» Стоп! Неверный подход! Вы пытаетесь решить не проблемы пользователя, а свои собственные. Получается дизайн «изнутри наружу». А это – Очень Плохая Штука!™

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

Что значит «родной»?

Вы замечали, как люди волей-неволей бросаются термином «родной», не до конца понимая, что это на самом деле значит? Давайте исправим ситуацию. Начнем с того, что выясним, чем «родной» не является.

Все дело в нулях и единицах

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

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

Фото: Дэвид Джонс / smashed.by/davidjones

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

Каждая из этих технологий основана на абстракциях. Например, Питон написан на Си. Цель каждого абстрактного слоя – каждого более высокого слоя в слоеном торте технологий, которые составляют современную компьютерную экосистему – упростить разработчикам создание приложений. Так что употребление термина «родной» в смысле бинарного программирования сегодня поблекло.

Итак, теперь, когда мы знаем, что такое «неродной», давайте выясним обратное.

Рисунок 9.2. Веб-технологии могут быть «родными» для определенных операционных систем. Здесь вы видите лэптоп Samsung с системой Chrome OS, чьи первостатейные граждане – HTML, CSS и JavaScript и веб-приложения. Фото: промо-изображение Google

Родной как культура

Термин «родной» относится к технологиям, т. е. языкам и объектным структурам – всему тому, что формирует культуру, язык, условные обозначения и нормы платформы. Это базовый уровень абстракции. Он включает в себя базовые символы, жесты и взаимосвязи, применяемые пользователем для взаимодействия с приложениями на установленной платформе. Эти элементы крайне важны, потому что они составляют культуру и нормы платформы[105]. Это языки, как визуальные, так и поведенческие, которые пользователь изучает для взаимодействия при пользовании платформой. И наоборот, это также слова, фразы и концепты, которые приложения на установленной платформе применяют для взаимодействия с пользователями. Чем больше они используются и постоянны на установленной платформе, тем больше плюсов для создания приложений для нее.