Менее больше в дизайне

Автор оригинала: Chris.

В этой главе проект от моей предстоящей книги «от одного до нуля: минимализм в программировании» появится в пересмотренной форме в 2021 году без крахмала (Сан-Франциско). Оставайтесь настроиться на обновления на запуск книги:

В этой главе вы попадете в жизненно важную область в информатике, которая значительно пользуется минималистичным мышлением: дизайн и пользовательский опыт (UX). Вряд ли нет области, где минимализм стал более принятым как в дизайне веб-сайтов, программных приложений и аппаратных гаджетов. Чтобы получить представление о важности минимализма в дизайне и UX, подумайте о различиях между поиском Yahoo и Google Search, BlackBerry и iPhone и OKC и Tinder. Технологии Winner часто поставляются с радикально простым пользовательским интерфейсом. Может ли быть что меньше больше в дизайне?

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

Минимализм в эволюции мобильных телефонов

Пример минимализма в вычислениях можно увидеть в эволюции мобильных телефонов (см. Рисунок 9-1). Сенатор Nokia, «мобильный» телефон в 1980-х годах весил 10 килограммов и был довольно сложен для обработки. Сложность и раздутые продукты – это отличная возможность для компаний, которые управляют упрощать и уменьшать. Год спустя, Motorola Manke Manke Manke Mainted «Dynatac 8000x», которая была 10x легче, весом всего 1 кг. Но там не остановилось. В 1992 году Nokia придумала модель 1011 снова вдвое больше мобильного телефона. А в 2000 году Nokia достигла мега-успеха со своей культовой Nokia 3310 весом всего 88 г. Удивительно, что с растущей сложностью технологии мобильных телефонов, пользовательских интерфейсов и функций, сложности пользовательского интерфейса, размера, веса и даже количества кнопок значительно снизились. Эволюция мобильных телефонов доказывает, что радикально минималистичный дизайн может быть проведен – даже как сложность применения увеличивается по порядку величины. Вы могли бы даже утверждать, что минималистичный дизайн проложил путь к успеху приложений для смартфонов и их взрывов в современном мире. Например, у вас будет трудно просмотреть веб-сайт, используя сопоставление сервисов или отправку видео-сообщения вашего друга с сенатором Nokia!

Рисунок 9-1: Эволюция мобильных телефонов – некоторые вехи.

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

Минимализм в поисках

На рисунке 9-2 я нарисовал минималистичный дизайн, который напоминает, как Google и их копирование – разрабатывает свой основной пользовательский интерфейс в виде радикально упрощенных ворот в Интернет. Но не ошибиться, минималистичный и чистый дизайн не случайно. Эта посадочная страница часто посещается миллиардами пользователей каждый день – несколько раз. Это может быть основная недвижимость в Интернете. Например, небольшая реклама на странице посадки Google будет мгновенно генерировать миллиарды кликов и, скорее всего, миллиарды USD в доход для Google. Но Google удалось удержать посадочную страницу чистой, несмотря на потерю краткосрочных доходов – потому что они знают, что сохранение целостности бренда и сосредоточением на поиски, выраженные через минималистичный дизайн, еще более ценнее, чем доходы, созданные посредством продажи их главная недвижимость.

Рисунок 9-2: Минималистский пример дизайна современной поисковой системы.

Теперь сравните этот чистый, целенаправленный дизайн с помощью того, какие альтернативные поисковые системы использовали – и все еще используют – для эксплуатации их основной недвижимости (см. Рисунок 9-3).

Рисунок 9-3: поисковая система или агрегатор новостей?

Рисунок 9-3 показывает более несрезанный подход, который использовался многими компаниями, предоставляющими базовый веб-поиск. Yahoo был популярным примером, но другие поисковые системы следовали за тем же путем: они загромождали ценную недвижимость с новостями и рекламой для повышения краткосрочных доходов. Но эти доходы не продлились – потому что это решение уехало товар, который его создал: пользователи. Уменьшенная удобство использования и повышенное трение в поисках привело к конкурентным недостаткам и непрерывной эрозии привычного поиска пользователей. Любой дополнительный элемент веб-сайта, который не связан с поиском, увеличивает когнитивную задачу пользователя, чтобы игнорировать во внимание заголовки, рекламу, рекламы и изображения – главный опыт поиска является одной из причин, почему Google постоянно увеличил свою долю на рынке. Последнее слово еще не распространяется, но растущая популярность целенаправленных поисковых систем в течение последних десятилетий указывает превосходство минималистичности и целенаправленного дизайна.

Материал дизайн

Как оказалось, Google еще больше пошел в попытку стимулировать минималистичный веб-дизайн – с созданием философии дизайна материала.

Проектирование материалов описывает способ организации и элементов экрана дизайна в соответствии с тем, что пользователи уже понимают интуитивно-физические элементы мира, такие как бумага, карты, ручки и тень. Рисунок 9-3 показывает такой пример дизайна материала. Сайт структурирован на картах – каждая карта, представляющая собой часть контента, которая напоминает газету с изображением и некоторыми заголовками текста. Взгляд и ощущение веб-сайта практически материалистичны – даже если эффект 3D представляет собой чистую иллюзию на 2D-экране. В принципе, дизайнеры могут создать совершенно нереальный пользовательский интерфейс, который может даже быть более эффективным. Например, вы можете спросить: Что такое использование добавления тени вокруг элемента карты – и какое использование элемента карты в первую очередь?

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

Рисунок 9-4: Материал против «Нематериал» дизайн

Вы можете найти полное представление к материальному дизайну со многими красивыми тематическими исследованиями на этом превосходном веб-ресурсе: https://material.io/design Отказ Новые конструктивные системы появятся, и пользователи будут все больше и больше использовать для цифровых работ, так что материальные метафоры могут легко стать менее полезными для следующего поколения пользователей компьютеров. На данный момент просто отметьте, что минимализм требует тщательного рассмотрения соответствующих ресурсов: время, пространство, деньги – и вы должны взвесить их в соответствии с потребностями вашего приложения. Но имейте в виду, что с экспоненциальными улучшениями в области аппаратных и программных и программных технологий, человеческое время – это далеко нечестный ресурс, чем вычисление!

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

Преимущества

Снимая весь беспорядок веб-страницы и фокусируясь на его основной целевой позиции, вы максимизируете относительное значение пользователю. Относительная стоимость является критическим водителем успеха в Интернете. Соревновательный веб-сайт находится всего в нескольких кликах, поэтому пользователи имеют тенденцию доступа к нескольким услугам для достижения своих целей, а не использовать один для всего. Например, вы можете использовать Google для поиска, Uber для мобильности, WhatsApp для связи. У вас нет большой проблемы с переключением на другой сайт с лучшим в классном значении, потому что трение переключения настолько низкое. Вот почему только лучшие услуги в классе, которые предлагают наиболее относительную стоимость по сравнению со всеми другими услугами, как правило, выживают. Например, предположим, что Uber создал поисковую систему, которая почти так же хороша, как Google. Это было бы огромное абсолютное значение – в мире, где ни одна другая поисковая система не существовала. Но в мире с отличной поисковой системой уже существует, поисковая система Uber будет иметь очень мало относительного значения.

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

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

Как добиться минималистичного дизайна?

Затем вы узнаете некоторые технические советы и методы о том, как достичь целенаправленного, минималистичного дизайна.

Используйте пробел

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

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

Рисунок 9-5: Используйте много пробелов.

На рисунке 9-5 показана простая идея дизайна для службы доставки пиццы онлайн: изображение вкусной пиццы и кнопки, которая говорит «Заказать вашу пиццу». Остальная часть страницы состоит из пробела. Пробел поддерживает фокус на главном веществе: заставить клиентов заказать пиццу. Это кажется достаточно простым, и это будет очень эффективно для надежнего, но редко будет предшествовать услугу доставки пиццы, чтобы использовать пробел в таком крайнем случае.

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

Рисунок 9-6: Whitespace в тексте.

Левая часть рисунка 9-6 показывает большой текстовый блок без использования много пробелов в тексте. Правая часть рисунка отображает текст в более расслабленной манере. Он использует различные способы ввести больше пробелов в тексте, чтобы повысить читаемость и пользовательский опыт: поля слежения влево и вправо вокруг текстового блока, отступ абзацев, повышенной высоты линии, верхней и нижней полей вокруг пунктов и увеличения размер шрифта. Конечно, эти введения пробела происходят по стоимости: требуется больше места для отображения одного и того же текста. Тем не менее, затраты на это дополнительное пространство незначительны: прокрутка дешево, и нам больше не нужно физически резать больше деревьев для производства бумаги. В то же время преимущества очень ощутимы: пользовательский опыт вашего сайта или приложения значительно улучшается!

Удалить элементы дизайна

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

Рисунок 9-7: Идеализированный процесс редактирования.

Без ошибок – удаление элементов дизайна нелегко! Увелищение SUT SOAS заставляет вас придерживаться ваших творений, даже если они не нужны. Вы потратили время и усилия, создавая их, и эти затонутые расходы указывают на них оправдать избавиться от них. Рисунок 9-7 показывает идеализированный процесс редактирования в Play-и когда я впервые узнал об этом в научном написании мастерской, он полностью преобразовал способ редактирования. Каждый элемент может быть классифицирован в зависимости от его важности относительно пользовательского опыта. Например, как создает пункт меню, скажем, в блоге ваших компаний помогают пользователю в процессе заказа при заказе продукта? Немного. Это может даже отвлечь их и уменьшить пользовательский опыт. Amazon разделил все ненужные элементы дизайна из процесса упорядочения, например, введя кнопку «Купить 1 клик». Удаление неважных и менее важных элементов дизайна – это отсутствие монастыря, потому что он гарантирует улучшить удобство использования с небольшим риском. Но только действительно отличные дизайнеры имеют смелость для удаления важных элементов дизайна, которые не очень важны. Тем не менее, это то, что отлично отделяется от просто хорошего дизайна.

Рисунок 9-8: Удалить неважных элементов. Слева: сфокусированная страница заказа со многими элементами дизайна. Справа: сосредоточенная страница заказа с удаленным ненужным элементам дизайна.

Пример показан на рисунке 9-8. Слева вы можете увидеть страницу заказа для нашей службы доставки пиццы, как вы можете увидеть его на практике. Некоторые элементы очень важны, такие как адрес для доставки пиццы и кнопки заказа. Некоторые элементы не очень важны, такими как слишком подробный список ингредиента. Некоторые элементы неважно или даже отвлекают, такие как «Что нового?» Информационная коробка на дне. Справа вы видите отредактированную версию этого заказа. Мы удалили ненужные элементы, ориентированные на самые популярные UPSELL, объединили список ингредиентов с заголовками и объединили этикетки с элементами формы. Это позволило нам добавить больше пробелов и даже увеличить размер очень важного элемента дизайна: изображение вкусной пиццы! Уменьшенный беспорядок и увеличенный фокус, вероятно, увеличит скорость преобразования страницы заказа посредством улучшенного пользовательского опыта.

Удалить особенности

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

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

Следовательно, термины «Software Bloat», «Функция ползучесть», и даже «Bloadware» возникло, чтобы описать феномену, где часть программного обеспечения стала неэффективным, сложным и медленным благодаря бесконечному добавлению новых функций. Точно так же самые успешные продукты в мире очень сосредоточены и сопротивлялись животному, даже если это не похоже на них. Отличным примером является Microsoft, для которой общее восприятие состоит в том, что она медленная, неэффективна и загружена слишком многими функциями. Но уклонение доступности в пьесе снова: то, что вы видите, это все, что есть – вы не видите, что функции Microsoft удалена или даже никогда не реализована. Хотя Microsoft огромна, функция – мудро, очень сосредоточено, учитывая, что сотни тысяч разработчиков программного обеспечения каждый день пишут новое программное обеспечение. Вот что Эрик Траут, известный инженер, который работал как для Apple, так и Microsoft, должен сказать о сфокусированном подходе Microsoft к программному обеспечению: «Многие люди думают о Windows, как это действительно большая, раздутая операционная система, и это может быть справедливой Характеристика, я должен признать. Он большой. Он содержит много вещей в нем. Но в своем ядре, ядро и компоненты, которые составляют самую суть операционной системы, на самом деле довольно оптимизированы ».

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

Уменьшить вариации типов шрифтов, размеров шрифта и количества цветов

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

Рисунок 9-9: Минималистичное использование размеров шрифтов, типов шрифтов, цветов и контрастов.

Быть последовательным

Приложение обычно не состоит из одного пользовательского интерфейса, кроме серии интерфейсов, обрабатывающих взаимодействие пользователя. Это приводит нас к другому измерению минималистичного дизайна: согласованность. Мы определяем согласованность в зависимости от степени, к которой мы минимизировали вариабельность выбора дизайна в данном приложении. Вместо того, чтобы представить пользователю другой «внешний вид и чувствовать» на каждом этапе взаимодействия, согласованность гарантирует, что приложение ощущается как целое целое. Например, iPhone предоставляет множество приложений, таких как браузеры, приложения для здоровья или сопоставления услуг. Хотя он сложно получить разные разработчики приложений договориться о последовательном дизайне, он все еще должен быть сделан для повышения силы бренда Apple. Чтобы обеспечить консистенцию бренда, Apple, Google и многих других программных компаний, используют руководящие принципы бренда, которые должны придерживаться любого вклад в разработчик. Обязательно проверьте это поле при создании собственного приложения. Для веб-сайтов это может быть достигнуто с согласованным использованием шаблонов и (CSS) таблиц стилей.

Заключение

В этой главе вы узнали, что минималистичные дизайнеры пришли к доминированию в мире дизайна, иллюстрируются некоторыми из самых успешных программных компаний, таких как Apple и Google. Чаще всего выигрышные технологии и пользовательские интерфейсы радикально просты. Никто не знает, что проводит будущее. Но распознавание речи и виртуальная реальность, вероятно, приведет к еще более простым пользовательским интерфейсам. Трудно представить будущее с более сложными и сложными для использования интерфейсов. Если вы думаете об этом, конечный минималистичный дизайн невидим. С вездесущим вычислением на рост-Алекса и Siri-я думаю, что мы увидим даже проще и даже более целенаправленные пользовательские интерфейсы в ближайшие десятилетия. Итак, чтобы ответить на вопрос, заданный в начале: да, меньше больше в дизайне!

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