Интерфейс важен

Чтобы создать полезный продукт надо не только уметь его программировать или нарисовать, но и уметь спланировать. Нужна ли эта программа? Какие заложить в нее функции? Какой спроектировать интерфейс? Статья расчитана на новичков в вопросах разработки программных продуктов.

Оригинал: Interface Is Important

    Большинство программ в мире не очень хорошие. Это грустно, но нам — пользователям — приходится с этим мириться. Дело во многих вещах: надоедливые баги, ужасные иконки, раздутые и неудобные интерфейсы и многое другое. Основная причина этих проблем заключается в отсутствии понимания разработчиком или программистом реальных запросов пользователей. В этой статье я постараюсь рассказать о зарождении программы, о той стадии на которой надо сформировать четкое видение программы и спланировать интерфейс. Эта проблема не очень сильно отражена в книгах и статьях и поэтому у разработчиков столько проблем в результате. В качестве примера я использую онлайн-редактор сайтов Code’n’Run, разработанный «Techmic Studios».


Большое изменение

    Большое изменение произошло в мире индустрии программного обеспечения (ПО) с началом развития онлайн-сервисов. Вместо установки программы на компьютер и использования до очередного «капута» операционной системы, теперь нам доступны программы прямо в браузерах. Взгляните на почту Gmail или Yahoo!Mail, текстовые редакторы типа GoogleDocs или даже музыкальные проигрыватели как Grooveshark. Удобно, когда всё это в Сети на облачных технологиях и доступно когда угодно и откуда угодно. Онлайн-программы отличаются так же и более высокой степенью защиты, в отличие от персональных компьютеров, ведь сервера защищают на очень высоком уровне.

Интерфейсы Gmail, Yahoo!Mail и GoogleDocs
Интерфейсы Gmail, Yahoo!Mail и GoogleDocs

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


Начинаем с идеи

    Начинать разработку программы надо с вопроса: надо ли кому-нибудь то, что я сейчас начну делать? Если всем задавать этот вопрос перед началом, то мы бы не страдали от бесконечных похожих программ, многие из которых просто плохие. Если на этот вопрос ответить сложно, то задайте себе другой: буду ли я сам пользоваться тем, что собираюсь создать? Многие разработчики увлеченно создают продукты для себя и это не требует комментариев. Разработчик всегда в ответе за качество программы и онлайн-сервиса, которым будут пользоваться люди. Если ответ на второй вопрос «да», то тогда программу можно делать, так как, скорее всего, и другим людям нужна такая программа. Если ответ «нет», тогда не стоит даже начинать.

    Давайте взглянем на редактор сайтов Code’n’Run. Нужен ли кому-нибудь элегантный онлайновый редактор сайтов? Да. Те, кто хотят быть особенно продуктивными, иметь возможность работать отовсюду, не забивать голову паролями к своим проектам и работать в простой и не перегруженной среде оценят идею Code’n’Run. А главное, что я сам, как веб-разработчик, буду пользоваться этим продуктом. Ну вот наша идея прошла первый фильтр. Что дальше? Дальше надо мыслить реально.


Планируем функции

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

    Браузеры — операционные системы веб-программ. Как и в двух самых популярных ОС, которые формируют каждая свои стандарты для ПО (элегантный и удобный MacOS и запутывающая Windows), браузеры ставят свои стандарты перед онлайн-ПО.

    Давайте взглянем на «диалог» через который надо пройти, чтобы понять функциональное наполнения Code’n’Run.

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

    Любые другие функции излишни, так как они не нужны для выполнения базовых задач, описанных выше. Конечно, можно добавить и другие функции, основываясь на вкусах пользователей. Так же будет уместным версия программы для наладонника, так как на них удобно кодировать (не так как на персональных компьютерах, конечно). Единственный наладоннник который удобен и популярен это iPad, так что надо разработать версию для тачскрина. Все остальные платформы не нужны. Например, на мобильнике кодировать почти невозможно, но если очень надо, то можно использовать основную версию программы.

    Еще одна функция достойная внимания — предпросмотр. Особенно она была бы удобна для пользователей iPad, им не придется переключать вкладки. Эта функция может послужить мотивом для создания консоли типа как у FireBug.

    Ну разве не раздражает просмотр длинного списка с целью найти нужный проект? Чтобы избавиться от этого в редактор стоит включить работу со списками файлов: можно показывать пользователю превьюшки сайтов и делать это в порядке отдаления даты создания сайта.

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

Интерфейс настроек BugZilla
Интерфейс настроек BugZilla

    Мы описали набор функций необходимый большинству разработчиков: загрузка файлов, загрузка их в интернет, редактор кода, поиск, версия для iPad, предпросмотр и настройки. Вот теперь можно остановиться. Любые последующие функции должны соответствовать специфическим условиям использования нашего редактора Code’n’Run. Например, если продуктом пользуется некая компания, то надо следить за версией программы. Если продуктом будет пользоваться начинающий программист, то стоит включить в программу справочник, который будет брать информацию из интернета. Если, скажем, не ясная какая-то функция php, то надо дать возможность просто выделить нужный кусок кода одним кликом запросить справку у php.net. Все эти функции уже используются другими редакторами и Code’n’Run просто заимствует их смысл.

    А как насчет особенностей продукта, которые нигде не встречаютя? Эксперименты приветствуются, но с осторожностью: проверять стоит одну функцию в раз. Не запихивайте в программу кучу функций удобность и резонность которых не проверена на практике. В Code’n’Run есть функция «Сердце» («The Heart»). Он показывет список избранных пользователем файлов; эта функция как раз сейчас тестируется. Пользователь может выбрать файл, папку или даже кусок кода, придать ему метку цветом и позже быстро воспользоваться. «Сердце» было предложено как альтернатива куче открытых окон при работе. Ну разве не элегантное решение?

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


Сигнал вместо шума

    Разработка хорошего интерфейса это понимание того как человек взаимодействует с информацией и средствами работы с ней. Не все понимают как это происходит, что приводит к появлению кучи посредственных интерфейсов, иконок и реализаций функций ПО. Некоторые считают, что дизайн это что-то про создание визуально приятного продукта. Это правда отчасти. Дизайн действительно предполагает решение задачи максимально элегантно и просто. Результатом может быть приятная картинка, но это не главное о чем стоит думать. Если дизайнер делает что-то внешне привлекательным и забывает про потребности пользователей, то мы получим хрень. Таким образом, во время дизайна надо удостоверяться, что пользователи в состоянии успешно пользоваться продуктом. Когда человек слышит звук, то он может сказать было ли это сигнал или просто шум; то же можно сказать и об интерфейсе — сигнал это то, что несет смысл, а шум несет отвлечение и неясность.

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

Наброски интерфейса Code'n'Run
Наброски интерфейса Code'n'Run

    После построения сетки, пора смотреть на детали проекта и комбинировать функции с интерфейсом. Все функии Code’n’Run могут быть представлены иконками и другими декоративными элементами, которые опишу ниже. По хорошо спроектированной иконке можно сразу сказать что делает функция. Изначально иконки создавались с целью облегчения работы новичков в Xerox Research Center в 70-х годах прошлого века. Сегодня многие дизайнеры забывают историческую цель использования иконок и создают и используют иконки, которые не говорят пользователям ни о чем. Очень многие интерфейсы включают такие иконки и из-за этого такими интерфейсами сложнее пользоваться. Если невозможно создать ясную иконку, то лучше заменить ее словами.

    Давайте двигаться дальше: декоративные части. Декоративные элементы не должны создавать никаких «визуальных шумов» и не должны отвлекать; наоборот, они должны помогать пользователю добиться цели. Линии, разделяющие элементы не стоит делать черными, жирными и слишком интенсивными. При разработке Code’n’Run, нам надо было отделить выбранную папку от дргуих в менеджере файлов, а так же хорошо выделить активные вкладки. Чтобы отделить большие элементы друг от друга такие как файловый менеджер и поле редактирования кода, можно использовать линии. Нельзя забывать о перегрузке интерфейса линиями: вертикальные стоит использовать только для разделения крупных элементов и колонок в таблицах; горизонтальные линии используются для разделения крупных элементов, списков и строк таблиц.

Интерфейс онлайнового редактора сайтов Code'n'Run
Интерфейс онлайнового редактора сайтов Code'n'Run

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

    Доступ к функциям программы должен быть простым: основные функции должны быть доступны по одному клику. Напрмиер, в Code’n’Run все главные функции, кое-какие второстепенные и эскпериментальная подчиняются этому правилу. Поскольку кнопкок быстрого доступа получилось немало, то менее важные второстепенные функции мы убрали в меню. Так же реализовали возможность доступа к функциям через кливиатуру.


Что дальше?

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

перевод: Рехимкулов Ринат

Реклама

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s