UX Case:“Lucy Design”recommendations

Recommendation to improve the functionality of the mobile application

Dana Markova
Dana Markova. UI/UX Design
6 min readApr 19, 2021

--

Tesler’s Law

https://lawsofux.com/teslers-law/

For any system there is a certain amount of complexity which cannot be reduced. Take care not to simplify interfaces to the point of abstraction.

https://odannyboy.medium.com/controls-are-choices-7de90363d0dd

By reducing controls (and thus reducing complexity for the user), you also reduce control over the device. Users can do far less with it, and have fewer options for customization. Again, sometimes this is desirable. But sometimes, it is a disaster. Reducing complexity means reducing control, and some users, particularly those whose skill goes beyond that of amateur/beginner, don’t just want control, they need it to perform their tasks effectively. Thus, it becomes a balancing act, with simplicity and automation on one side, and complexity and control on the other.

The Bad: Smaller and Hidden Product Descriptions

https://www.nngroup.com/articles/e-commerce-usability/

While the growth of product images is commendable, it cannot be at the expense of product descriptions. Descriptions can answer questions about use, benefits, care, materials, and measurements. This is not to say that a 1,000 word treatise on a product needs to be visible as soon as the page loads, but users have to be able to quickly and easily find and use the product description when they want to.

Product information on sites can be layered. If space is tight, include a summary or brief description at the top of the page, with a clear link leading to additional detail. Ensure that the summary information is clear and descriptive. Users will dig for details, but they shouldn’t have to hunt to find the product information in the first place.

Комментарий: наше приложение будет иметь несколько этапов усложнения (от коллажа к 3д), в этом случае важным будет оставить ощущение контроля на каждом этапе взаимодействия с приложением, а так же, это позволит юзеру легче справиться с новым функционалом в будущем, если он будет знаком достаточно с прошлыми этапами и ux паттернами. Чрезмерная минимализация может быть недостаточно убедительной — на экране/карточке товара стоит добавить кнопки взаимодействия с предметом и описание. Для точного определения функционала стоит обратиться к Jakob’s Law. В прикрепленном видео можно увидеть советы по набору функционала для каждого типа пользователя.

Jakob’s Law

https://lawsofux.com/jakobs-law/

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.

By leveraging existing mental models, we can create superior user experiences in which the users can focus on their tasks rather than on learning new models.

Комментарий: конфигуратор соединяет в себе 2 типа функционала поделенных на 2 части экрана: верхняя часть — взаимодействие с коллажем, его модификация, нижняя — e-commerce. Таким образом, элементы управления должны делиться согласно этим группам. Верхняя часть отвечает за визуал (вперед/назад в версиях), нижняя за выбор товара, функционал этой части должен быть подобен другим e-commerce приложениям с учетом необходимого для нас функционала, т.е. его частичной минимализации (категории товаров, описание, цена/скидки, возможность дальнейшего взаимодействия с товаром — добавить в избранное, добавить в множественном числе), а так же, она должна содержать предпосылки/намеки к переходу к следующему этапу — заказу товара, согласно Goal-Gradient Effect.

Goal-Gradient Effect

https://lawsofux.com/goal-gradient-effect/

The tendency to approach a goal increases with proximity to the goal.

Providing artificial progress towards a goal will help to ensure users are more likley to have the motivation to complete that task.

The closer users are to completing a task, the faster they work towards reaching it.

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

Spatial Memory

https://www.nngroup.com/articles/spatial-memory/

Spatial memory is the ability to learn the location of objects of interest by interacting with them repeatedly.

In graphical user interfaces (GUIs), this capability is absolutely essential, as it allows users to quickly locate controls without undergoing laborious visual search each time. Searching an interface visually for specific objects is inherently a slow and effortful process, and reducing the need for it is a huge boon to user efficiency.

For users to be able to develop spatial memory, two things are necessary:

1. Stable UIs where things don’t move around (much)

Large amounts of data rarely fit on a screen and force the user to scroll. This type of information display, where data is divided across several pages or screenfuls, hinders build spatial memory of the information space. Consider adding visualization techniques such as focus+context displays to help users build a spatial sense of the information space.

2. Repeated practice accessing the objects

To speed up that process, designers need to supply other supplementary visual or textual cues. This means, for example, pairing up icons with text labels or including page thumbnails in a document to help users find specific pages.

Комментарий:

Для нас важно построить такую информационную архитектуру, которую мы сможем легко дополнять новым функционалом, — т.е. на экране или в выбранной зоне должно быть достаточно пространства для новых кнопок и иконок (согласно комментарию к Jakob’s Law) -

в верхней зоне элементы управления проектом (изменение коллажа, навигация назад/вперед, несколько версий дизайна и стиля, выбор комнаты для изменения квартиры, сохранение проекта, поделиться проектом и тд),

средняя зона (навигация по части e-com: табы с категориями товаров, особенно когда количество категорий будет увеличиваться и потребуется быстрый поиск — т.е. Свайп самих табов и нажатие на нужную категорию открывает экран товаров, вместо слайда по всем экранам до тех пор, пока не попадется нужная категория, избранные товары, экран всех выбранных товаров — в случае, если категорий слишком много и нужно на одном экране увидеть все что выбрал без нажатия на кнопку купить, в случае, если человек еще не готов принять решение),

и нижний блок для резюмирования собранного коллажа (количество выбранных предметов и цена, скидка — как призыв к действию), либо в нижней части будет возможность добавить табы с элементами управления приложением вообще (если часть с коллажем будет перегружена), а так же, которая будет повторять распространённые user experience patterns (e-com/3d simulation etc) для интуитивной навигации по приложению.

Occam’s Razor

https://lawsofux.com/occams-razor/

Among competing hypotheses that predict equally well, the one with the fewest assumptions should be selected. The best method for reducing complexity is to avoid it in the first place.

Комментарий: При рассмотрении двух видов дизайна приложения: vertical and landscape mode, нужно проанализировать удобство использования нашего функционала на каждом из них, (Jakob’s Law):

1. Первое знакомство с приложением/онбординг после загрузки из маркета: открытие приложения в вертикальном режиме.

2. Квиз/форма: имеет много элементов, которые лучше заполнять в вертикальном режиме.

3. Просмотри коллажа: горизонтальное положение.

4. E-com: выбор предметов со списка + информация о них: лучше иметь для этого больше пространства + удобный скролл: вертикальное.

4. E-com: форма заказа: вертикальное положение

--

--