Зачем кому-то использовать GitHub на своем телефоне? Этот вопрос скептики задали Райану Нистрому, техническому директору GitHub и бывшему руководителю отдела разработки iOS в Instagram, когда вскоре после приема на работу ему было поручено сократить десятилетие рабочих процессов, инструментов и обмена сообщениями на сайте хостинга разработки программного обеспечения в структуру для мобильного приложения.
Аргумент критиков заключался в том, что кодирование было слишком суетливым и экранным занимать много места на телефоне.
Но, судя по данным об использовании и взаимодействии, они ошибались. С момента запуска бета-версии в начале 2020 года на GitHub приложение было загружено три миллиона раз и использовалось для 1,2 миллиона проверок кода и 600 000 слияний кода, согласно электронному письму, которое представитель компании поделился с Built In.
Ничто из этого не означает, что процесс разработки был легким. Фактически, задачи проекта объясняют, почему многие компании, особенно стартапы, создающие свои первые цифровые технологии, начинают с подхода, ориентированного на мобильные устройства.
» Намного, намного легче начать с малого, чем начать с огромного холста и сжать все вокруг ».
« [Mobile-first] добрый именно того, что там написано, — сказал мне Нистром. «Вместо того, чтобы брать то, что традиционно было разработано для больших экранов, больших мониторов, ноутбуков или чего-то еще, вы начинаете с действительно крошечного экрана, а затем увеличиваете масштаб, потому что намного, намного проще начать с малого, чем начать с малого.
Когда ваши основные пользователи — люди в движении, мобильный дизайн, как правило, работает достаточно хорошо. Instagram, Snapchat — даже New York Times — используют бесконечные прокрутки, составные истории и липкую навигацию, чтобы удерживать внимание пользователей и помогать им быстро просматривать истории и обновления. ]
Но что, если ваша компания разрабатывает программное обеспечение для инвестиционного аналитика, сканирующего два монитора на торговой площадке? Или исследователь Министерства сельского хозяйства США, отслеживающий региональные популяции растений на большом экране? Или пользователи с физическими ограничениями или живущие в частях света с неразвитыми широкополосными сетями? Или любой из 161 миллиона подписчиков Netflix, просматривающих персонализированное меню в поисках чего-нибудь интересного?
Внезапно подход, ориентированный на мобильные устройства, кажется менее актуальным, если не введены в заблуждение.
Содержание статьи
- 1 Тактический подход к мобильному дизайну в уме
- 2 Оцените свою пользовательскую базу
- 3 Оптимизируйте свой Информационная архитектура
- 4 Приоритеты мобильного дизайна Stream
- 5 Выберите адаптивный или адаптивный дизайн
- 6 Сделайте удобство использования вашей первой заботой
- 7 Учитывайте стандарты проектирования материалов и инструментарий
Тактический подход к мобильному дизайну в уме
- Оцените привычки и потребности вашего пользователя база. Это поможет определить, стоит ли использовать дизайн, ориентированный на мобильные устройства.
- Определите приоритеты контента, чтобы установить удобную для пользователя иерархию информации.
- Выберите адаптивную или адаптивную стратегию дизайна, чтобы перенести опыт между устройствами и окнами просмотра.
- Определите области для устранения пространственной неэффективности, такие как желоба и выступы.
- ] Создание библиотеки компонентов для мобильных функций. Автоматически сгенерированные текстовые ответы, липкие навигационные вкладки и складываемые карточки могут улучшить удобство использования.
- Собирайте подборки передовых методов. Обратите внимание на рекомендации Google по дизайну и индексации для мобильных устройств, руководства Kotlin для Android и Apple. руководство по человеческому интерфейсу.
- Разработка прототипов для проверки взаимодействия с пользователем.
«Я наблюдал, например, эпизод Во все тяжкие на моем телефоне, но это не оптимально, правда? » — сказал Райан Хэтч, стратег по UX-контенту из чата-провайдера Stream из Колорадо. «Я готов поспорить, что в офисах Facebook они не думают в первую очередь о мобильных устройствах. Они думают прежде всего о продукте, прежде всего о покупателе, прежде всего о пользователе. И где бы этот человек ни был, они могут связаться с ним ».
Точка зрения Хэтча становится все более и более банальной. Если пять лет назад все, о чем можно было бы говорить о проектировании мобильных устройств, то сегодня предпочтение отдается мобильным устройствам.
Это не так. умаляет его ценность. В дополнение к оптимизации процесса разработки подход, ориентированный на мобильные устройства, может помочь вам охватить значительно больше пользователей. Исследования Statista показывают, что смартфоны составляют 51 процент глобального использования Интернета а дизайн, ориентированный на мобильные устройства, часто является первым этапом адаптивного или адаптивного дизайна фреймворков, которые адаптируют возможности пользователя к любому устройству, на котором они работают.
«Разработка мобильных устройств в первую очередь очень важна, потому что это помогает выделить то, что является наиболее важным для бизнеса», — сказала Эмма Мур, основательница из находящегося в Колорадо агентства по развитию PVT Group и ранее занимал исследования UX, управление продуктами и дизайн пользовательского интерфейса в компаниях, включая Disney. « Таким образом, вы получаете эту иерархию информации очень органично».
И даже если вы такая зрелая компания, как GitHub или Stream, сначала разработал свой сайт для больших экранов, мобильное мышление может оказаться ценным при переносе этого опыта на смартфоны и планшеты. Вот несколько советов, которые следует учитывать при применении подхода на практике.
Оцените свою пользовательскую базу
Прежде чем идти по пути мобильных устройств, рекомендуется инвентаризация вашей пользовательской базы. Хэтч любит рассказывать историю своей предыдущей работы в агентстве в компании, которая предлагала клиентам небольшие нетрадиционные ссуды. Почти половина заемщиков не являлись носителями английского языка, и многие использовали телефоны Android старых моделей с более медленной скоростью соединения. В данном случае основными проблемами были удобство использования и скорость загрузки.
«Что наиболее важно, так это действительно понять, как, когда и почему аудитория собирается использовать ваш продукт », — сказал он.
Вот почему приложение ESPN предлагает небольшие ролики выделения, а служба обмена сообщениями в приложении LinkedIn предлагает текстовые автоответы за ответы на личные сообщения, сказал он мне. Эти функции позволяют понять, что пользователи, скорее всего, будут взаимодействовать с мобильными устройствами в очень специфических условиях, например, пешком до пригородных поездов или ночью перелистывать телефоны в постели.
Аналогично , когда команда Нистрома приступила к разработке мобильного приложения на GitHub, они провели важное различие между типом работы, которую разработчики, скорее всего, будут выполнять за столом — в основном, написанием кода — и типом работы, которую они могут выполнять на своих телефонах — сортировка уведомлений, организация файлы, а также просмотр и утверждение проектов кодов.
Разделение веб-сайта до его основных функций и функций является отличительной чертой дизайна, ориентированного на мобильные устройства, и это начинается с хорошо продуманной информационной архитектуры. Стандартные размеры экрана смартфона в среднем от 4,7 до 6,5 дюймов, а наиболее распространенное разрешение экрана мобильных устройств составляет всего 360 на 640 пикселей . Это означает, что у дизайнеров ограниченное пространство для ключевых функций и сообщений, а приоритезация контента имеет решающее значение для конструктивного взаимодействия. «Вещи нужно складывать, они не могут навсегда, чтобы загружаться, и должны быть действительно быстрые CTA [calls to action] », — пояснил Хэтч. Почти половина основной пользовательской базы Steam, состоящей из менеджеров по продуктам и программного обеспечения инженеры получают доступ к сервису через мобильный телефон. Принимая во внимание эту группу клиентов, две основные цели движут текущими усилиями по переводу веб-целевой страницы на мобильные устройства. ] Эти приоритеты привели к внутреннему обсуждению возможных вариантов экономии места, таких как удаление главного изображения рабочего стола или сжатие панели навигации верхнего уровня до гамбургера или ползункового меню. Они также предложили Hatch рассмотреть возможность интеграции предопределенного текстового ввода, чтобы пользователи могли быстро отвечать в чате автоматически. «Вещи нужно складывать, они загрузка не может длиться вечно, и необходимы действительно быстрые CTA [calls to action] ». Facebook Marketplace и онлайн-рынок OfferUp Он сказал мне, что простые, экономящие время взаимодействия особенно хороши. Вместо того, чтобы участвовать в бартере, процессе, который может потребовать обширного набора текста и изрядной эмоциональной нагрузки, мобильные пользователи могут выбрать из короткого списка автоматически сгенерированных сообщений и нажать индикаторы плюс или минус, чтобы скорректировать цену предложения для перечисленный элемент. Это упрощает транзакцию, особенно для людей, идущих пешком. «Три или четыре обычных открывателя, которые Facebook предоставил, по сути, говорят:« Эй, это доступно? «Эй, не могли бы вы рассмотреть меньшее?» «Эй, вы предлагаете доставку?» И это как «выберите, бум, и просто отправьте мне», — сказал Хэтч. «Это помогает снизить уровень безопасности». Тем временем команде разработчиков GitHub пришлось переосмыслить веб-правила для визуальной и навигационной иерархии, — сказал мне Нистром. . Разработчики привыкли к взлому URL-адресов — использованию поисковых запросов для быстрого перехода к важной информации. Но чтобы упростить навигацию внутри приложения, команда решила заменить поле глобального поиска панелями вкладок в верхней части страницы. офф. Некоторые разработчики не хотят использовать панели вкладок в мобильных приложениях, потому что они занимают и без того ограниченное место. По словам Нистрома, на ранней модели iPhone с разрешением 320 на 480 пикселей типичная панель вкладок из 50 пунктов могла занимать до 10 процентов высоты области просмотра. Но когда альтернативой является нажатие на значок стрелки назад полдюжины раз, чтобы перейти к точке входа в систему навигации, панель вкладок может оказаться наиболее безболезненным и удобным решением. Затем возникает проблема плотности информации: сколько белого пространства следует оставлять между текстом, изображениями и кнопками, чтобы дисплей не выглядел тесным? Когда Нистром был в Instagram, белое пространство считалось частью «расслабляющего и приятного опыта», который команда стремилась передать. Но база пользователей GitHub совершенно другая. Оказывается, кодеры предпочитают более плотную компоновку конфигураций. «Очень быстро мы начали получать отзывы о чрезмерном использовании пустого пространства, которые стали действительно интересными», — сказал Нистром. «Мы начали полагаться на то, что наша аудитория — разработчики. Поэтому вместо того, чтобы создавать эти действительно дышащие пространства между строками кода, желобами, отступами и прочим, мы выбрали довольно плотную конфигурацию ».
При планировании архитектуры сайта мобильных приложений возникает еще один важный вопрос: для размещения подхода, ориентированного на мобильные устройства, в рамках адаптивного дизайна или адаптивного дизайна. Адаптивные сайты обычно отправляют единый кодовый набор на все устройства. Fluid g риды и медиа-запросы позволяют изменять макет, масштаб изображения и типографское оформление целостно в зависимости от размера окна просмотра и ориентации устройства. Адаптивная дизайн, с другой стороны, требует от разработчиков написания уникального кода для каждого устройства. Хотя часто это лучше для оптимизации скорости сайта, времени загрузки мультимедиа и удобства использования, адаптивный дизайн требует много времени и вряд ли будет принят унаследованными организациями, особенно теми, в которых инженерная группа пользуется вниманием руководителей высшего звена. «Даже Disney не уделяет много внимания адаптивному дизайну, потому что инженеры не могут делать этого постоянно», — сказал мне Мур. Существует даже более поздняя эволюция изменчивости дизайна — прогрессивные веб-приложения (PWA), которые добавляют функции нативных мобильных приложений, такие как push-уведомления , значки на главном экране и офлайн-контент в поддерживаемые браузеры. Внедрение Microsoft PWA в Windows 10 может быть признаком того, к чему все идет — все больше и больше веб-сайтов выглядят и работают как нативные приложения. » Если вы слышите слова «технический долг» или «давай сначала сделаем это», значит, возникает проблема с бюджетом, и у тебя не будет свободы делать все. Вы должны быть действительно стройными, умными и гибкими ». Выявление интересов высшего руководства может помочь дизайнерам спланировать стратегию это соответствует интересам организации. «Если вы слышите такие слова, как:« Мы не можем сделать это прямо сейчас; нам нужно подождать ». Или, если вы слышите слова« технический долг »или« Давай сначала сделаем это », возникает проблема с бюджетом, и у тебя не будет свободы делать все. «Вам придется быть действительно стройным, умным и гибким», — сказал Мур. Однако только потому, что есть финансовые или кадровые ограничения, это не так. Это означает, что амбициозный дизайнер не может отстаивать стратегию, которая, по его мнению, поможет компании процветать. Адаптивный дизайн или PWA может показаться недосягаемым для стартапа или компании среднего размера, но если их ценность может быть подтверждена с помощью показателей конверсии, лидеры данных могут захотеть поучаствовать в поездке. ] «Создайте мобильный опыт, не просите», — сказал Мур. «Никогда не просите об этом. Начни с мобильного. А если возникнет вопрос, скажите: «Это отраслевой стандарт». «Вы можете проводить мошеннические эксперименты в Google Analytics», — добавила она. «Распространите мобильную версию примерно на 5 процентов вашего рынка, чтобы никто не волновался. А если через полтора месяца конвертация станет лучше, тогда у вас есть аргумент, основанный на данных ».
Когда люди используют мобильные приложения, их ориентация часто сильно отличается от ориентации веб-пользователей. У них есть срочная потребность, которую они хотят обслужить как можно быстрее. Возможно, им нужно успеть на поезд или самолет. Может быть, они хотят проверить баланс аккаунта до совершения покупки. Какой бы ни была цель, она часто сопровождается обостренным чувством безотлагательности. Disney — компания, которая хорошо понимает такие контекстуальные факторы, — сказал мне Мур. Изображения в приложении Disney World сворачиваются в вертикальную стопку, в которой наиболее подходящие слайды располагаются сверху, часто со встроенными рекламными объявлениями. «Вы заметите, что все можно легко локализовать », — пояснил Мур. «Изображения очень светлые, потому что связь в Индии может быть медленнее, чем в Америке. Люди по-прежнему хотят планировать свою поездку. Так что практичность намного превосходит опыт [aesthetic] ». Дизайн, ориентированный на мобильные устройства, как она мне сказала, сводится к удобству использования, что делает опыт интуитивно понятным и функциональным насколько возможно. Хотя это можно улучшить, сократив время загрузки и выделив ключевые сообщения на странице это также можно улучшить с помощью типов компонентов и навигационных взаимодействий, поддерживаемых приложением. «Не бойтесь, если ваш файл Adobe Sketch имеет длину 25 дюймов. Это опыт ». Есть причина, например, что бесконечная прокрутка стала популярной в мобильных приложениях, таких как Нью-Йорк Таймс ', Facebook и Snapchat. Благодаря неисчерпаемому запасу контента, который предлагает переменные вознаграждения по мере того, как пользователи сталкиваются с новыми историями или сообщениями, приложения не дают пользователям веских причин для ухода. В мобильном приложении, где пользователи, скорее всего, просеивают контент пальцем, прокрутка — это отзывчивое взаимодействие, которое держит их на крючке. «Как дизайнеры, это заманчиво. , и я прохожу через это прямо сейчас, чтобы построить модуль с четырьмя кранами, чтобы пробивать все », — сказал Хэтч. «И это может хорошо работать на настольном компьютере, но не так хорошо на мобильном телефоне. Так что не бойтесь, если ваш файл Adobe Sketch имеет длину 25 дюймов. Вот и опыт ». Однако для такой крупной зрелой платформы, как GitHub, поддержка удобного мобильного интерфейса представляет собой другой набор проблем. В недавнем выпуске приложения заметные кнопки и флажки позволяют разработчикам просматривать и объединять запросы на включение. Пользователи могут переходить к изолированным блокам кода в файле разметки, а сочетание собственных и веб-инструментов рендеринга предотвращает медленную загрузку страниц и скачкообразную прокрутку. «Это действительно сложно взять неограниченное количество конфигураций и стилей, которые вы можете получить с помощью Markdown и HTML, а затем перенести их на телефон, используя собственные библиотеки рендеринга текста », — сказал Нистром. «Это должно не только работать, но и быть очень быстрым. И он должен быть стабильным ». Но как бы трудно ни было перенести большой экран на мобильный, поддерживая удобное для пользователя устройство -агностическая платформа — даже для крайних случаев, таких как проверка кода — вероятно, является разумным вложением. Как сообщалось в Google недавно перешел на для индексации сначала с мобильных устройств, используя робот Googlebot для смартфонов, чтобы сканировать все веб-сайты в поисках рекомендованного содержания. Кроме того, как отмечается в статье, обновление страницы Google запуск которого запланирован на май, «подчеркнет скорость загрузки в поисковых рейтингах» и «вероятно, даже более важно » Если бы компании еще не отдавали предпочтение мобильному дизайну для поисковой оптимизации, ожидаемое обновление, вероятно, их подтолкнет.
Для стартапов с ограниченными ресурсами и среднего бизнеса программных фирм, хорошая новость заключается в том, что за последние несколько лет стало намного проще создавать мобильные приложения с использованием стабилизированных кроссплатформенных языков, таких как React Native . ] Хотя для создания единообразного взаимодействия на всех устройствах может потребоваться адаптация CSS и условные операторы кода для определенных анимаций и интерактивных эффектов, распространение таких технологий «построить один раз, развернуть повсюду» ограничивает потребность в найме разных инженерных групп для раздельной разработки версий одного и того же приложения для Android и iOS. «Что React Native делает для UI / UX, это позволяет вам делать действительно хорошие сообщения об ошибках и предоставлять быструю обратную связь с пользователем », — сказал Мур. «Так что знание того, как работает React Native, может дать вам большую свободу в микровзаимодействиях, которые нравятся людям, и это не требует больших затрат для компании, потому что большая часть этого уже сделана заранее». «Я настоятельно рекомендую следовать многому из того, что сделали и узнали крупные технологические компании, и, вероятно, не изобретать колесо заново». ] В то же время, руководства Google по дизайну и индексации для мобильных устройств Kotlin учебники для Android и пользовательский интерфейс Apple руководящие принципы содержат поучительные чертежи, которым должны следовать дизайнеры и разработчики. «Я настоятельно рекомендую следовать многим из того, что крупные технологические компании сделали и узнали и, вероятно, не изобретать велосипед заново », — сказал Нистром. «Есть отличные рамки, инструменты и документация, как для дизайна, так и для базовых технологий, которые делают это намного безопаснее и удобнее». Nystrom сказал мне, что мобильный Сегодняшние приложения делятся на два основных лагеря: приложения, разработанные как TikTok и Snapchat, с искусной анимацией и жестами, которые создают «плавное ощущение толпы», и стандартные приложения, которые «выглядят и ощущаются так, как будто они были созданы Apple или Google. Мобильное приложение GitHub больше похоже на последнее. Строго придерживаясь руководящих принципов разработки Google и Apple, команда дизайнеров создала приложения для Android и iOS с нуля с учетом визуальной разборчивости и простоты использования. Большая часть шестимесячного процесса была потрачена на создание библиотеки компонентов с использованием Figma для размещения стандартных компонентов пользовательского интерфейса из Apple UIKit Swift и Google материалов и библиотек компонентов ]. «Вы почти перетаскиваете компоненты в конструкции и прототипы», — объяснил Нистром. «Я говорю так, будто мы получаем все это бесплатно. Это не так просто. Но, по большому счету, наличие реальной системы проектирования и фреймворка и использование Figma было супер, супер полезным ». Появление цифровых помощников, дополненная реальность и виртуальная реальность расширяют спектр интересов дизайнеров. Но что становится все более очевидным, так это то, что мобильные приложения и веб-браузеры вряд ли исчезнут в ближайшее время. Даже если в прошлом году больше людей было дома, использующих Zoom, тренирующихся на специализированных фитнес-платформах и разговаривающих с цифровыми помощниками, такими как Alexa, мобильные устройства не особо впечатлили его.
«Даже когда мы дома, нам все равно нужны наши телефоны», — сказал Хэтч. «Я думаю, что основная основная цель — это просто прямое общение: друг с другом и с компаниями. «Привет, ребята, вы открыты сегодня?» «Разрешаете ли вы обеды в магазине?» «Могу ли я связаться с кем-нибудь?» И это происходит из чата в приложении, текстовых сообщений и электронной почты ». «Может быть, через пять лет мы не будем носить с собой телефоны, — добавил он, — но мы прошли через 12 версий iPhone, и на практике мы держит телефон, который выглядит примерно так, как 10 лет назад. И, если бы я собирался поспорить, мы будем делать то же самое в 2030 году ». Оптимизируйте свой Информационная архитектура
Приоритеты мобильного дизайна Stream
Выберите адаптивный или адаптивный дизайн
Сделайте удобство использования вашей первой заботой
Учитывайте стандарты проектирования материалов и инструментарий
Загрузка...
