Рубрика «пользовательский интерфейс»

Для автоматизации тестирования разработка надёжных скриптов может оказаться довольно сложной задачей. Расскажу о методах повышения надёжности через призму пирамиды автоматизации тестирования с минимизацией зависимости от пользовательского интерфейса. Затрону швы в коде, локаторы и стратегии поиска UI‑элементов.

В книге «Успех с Agile: разработка программного обеспечения с использованием Scrum» (англ. Succeeding with Agile: Software Development Using Scrum, Mike Cohn) Майк Кон представил пирамиду автоматизации тестирования как модель, описывающую три уровня:

  1. Модульный уровеньЧитать полностью »

В книге «Успех с Agile: разработка программного обеспечения с использованием Scrum» (англ. Succeeding with Agile: Software Development Using Scrum, Mike Cohn) Майк Кон представил пирамиду автоматизации тестирования как модель, описывающую три уровня:

  1. Модульный уровеньЧитать полностью »

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

Читать полностью »

Давайте сыграем в игру. У нас есть два ряда знакомых всем пользователям iOS-иконок. На первый взгляд иконки сверху и снизу одинаковые. Но это не так. В одном ряду вы видите настоящие иконки, а в другом подделку.

Секрет формы иконок iOS: это сквиркл? Разбор - 1

Секрет формы иконок iOS: это сквиркл? Разбор - 2

Можете ли вы определить, где какие? Не торопитесь, посмотрите внимательно? Ну что, выбрали?

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

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

Но! В интерфейсе iOS нет ни одного квадрата с закруглёнными углами. Все элементы в iOS, это не квадраты и прямоугольники — это суперэллипсы!

Сегодня мы поговорим про секреты в дизайнах продуктов Apple. Что такое суперэллипс? В чём магия формы иконок? И почему HomePod — это суперяйцо.

Читать полностью »

иероглифы

Египетские иероглифы или обозначения кнопок на стиралке?

Я думаю, что, чисто теоретически, мы бы уже могли подключить большинство существующих ныне устройств к интернету, этим и порожден растущий интерес к Интернету Вещей (IoT).

Получим ли мы от этого большую пользу — уже другой вопрос.

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

Конечно, лоток все еще требует ручного опорожнения, а в приложении нужно нажать на «reset» чтобы сбросить показания и начать вести отсчет заново. В этот момент, я задал себе вопрос: «Зачем?»

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

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

Тем не менее, мне еще предстоит найти вескую причину использования таких примочек (не считая сомнительного развлекательного аспекта). Я не думаю, что когда-нибудь «попрошу Алексу» дистанционно включить/выключить свет, находясь при этом в трех метрах от выключателя.Читать полностью »

Эта статья будет представлять собой анализ нескольких уроков по UX/UI, которые мы получили, внимательно наблюдая на выставке за парой сотен людей, занимавшихся плейтестингом ранней сборки нашей игры Steamhounds.

7 практических уроков по UX - 1

Для понимания контекста скажу, что Steamhounds — это пошаговая игра, смесь JRPG и тактического боя на сетке. Игроки могут сражаться против ИИ, но мы по возможности стремились мотивировать их играть друг против друга, сидя рядом за разными мониторами.

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

Сага опций - 1Чтоб я вновь устроил Сампо,
Сделал короб многострунный,
Вновь пустил на небо месяц,
Солнцу снова дал свободу…

                                 «Калевала»

Настольные игры выглядит очень привлекательно для начинающих разработчиков. Здесь нет необходимости в построении фотореалистичных изображений и применении сложных шейдеров (хотя никто не запрещает этим заниматься). Даже использование 3D, в подавляющем большинстве игр, вовсе не обязательно. Сложность настольных игр сосредоточена на не визуальных составляющих. Пользовательский интерфейс выглядит простым и до предела примитивным.

Вот только… он таковым не является! Сегодня я хочу рассказать о своём опыте в разработке дизайна пользовательского интерфейса настольных игр, накопленном более чем за год работы.
Читать полностью »

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

image


Анимации, о которых пойдёт речь, демонстрируют связь различных состояний интерфейса, указывают на взаимодействие между общими элементами, присутствующими в разных состояниях, ненавязчиво привлекают внимание пользователей к тому, что они должны обязательно заметить. В ходе работы автор статьи следовал идеям из руководств Material Motion, Animation Principles и The UX in Motion Manifesto. Примеры были созданы с использованием InVision Studio. Загрузить файлы с исходным кодом этих примеров можно здесь.
Читать полностью »

История фреймворка React: как Фейсбук приобрел Инстаграм и почему это привело к открытию исходного кода React.js

Как Фейсбук приобрел Инстаграм и почему это привело к открытию исходного кода React.js - 1

Сегодня React — одна из самых популярных в мире библиотек JavaScript для пользовательского интерфейса: более 70 тыс. «звезд» на Гитхабе, не менее 1100 авторов и миллионы скачиваний каждый месяц — кроме того, этот фреймворк используется более чем в 4 тыс. компаний. Но когда Фейсбук впервые показал React миру, это мало кого обрадовало.

Мы решили погрузиться в историю рождения одной из самых популярных технологий в мире разработки ПО — React, и пригласили Пита Ханта (Pete Hunt), стоявшего у истоков этой библиотеки (сейчас он генеральный директор компании Smyte), чтобы он наконец-то рассказал о том, для чего создавали React, почему эта технология стала популярной в Фейсбуке после приобретения Инстаграма, и как она в итоге вышла в люди.

Основные моменты

От приложения Facebook Camera к приобретению Инстаграма


Марк (Цукерберг) собрал всех и говорит: «Мобильные устройства «выстрелят», поэтому срочно бросаем всё и переводим ресурсы на мобильные разработки». Мне казалось, это какая-то сумасшедшая идея: мы не могли поддерживать работу самого большого фотосайта в сети, имея горстку людей в команде. Совершенно бессмысленно переводить людей на разработку приложений для iOS и Android, которые составляют совсем небольшую долю нашего трафика. Но оказалось, что Марк был на 100% прав — поэтому я и не генеральный директор Фейсбука…

Мы разработали приложение Facebook Camera, и даже гордились тем, что получилось… Но пришел Инстаграм — и наш проект канул в Лету…

Ребятам из Инстаграма дали гараж на территории Фейсбука, где можно было сидеть и спокойно пилить свою идею. Они пользовались надежными системами безопасности Фейсбука, но кроме того продолжали использовать AWS, а еще — разрабатывали собственную стратегию продукта, насколько я могу судить… И я был первым сотрудником из Фейсбука, которого перевели в Инстаграм…

Переведено в AlconostЧитать полностью »

Недавно опубликованная в Smashing Magazine статья Дениса Мишунова показалась нам очень интересной: она посвящена подходу, о котором многие до сих пор не задумываются, хотя он уже окружает нас в популярнейших сервисах. С разрешения автора и первоисточника мы решили перевести этот материал для хабрасообщества.

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

Правдивая ложь оптимистичных интерфейсов - 1

Оптимистичный подход к UI не в том, чтобы смотреть на веб через розовые очки — по крайней мере, не только в этом.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js