- Published on
[OOUI] How objects are displayed changes how easy it is to use.
Roughly speaking
- Object-oriented UI design is packed with valuable design rules.
- Regarding the need to view the same object from a different angle.
- A complete list of patterns in the collection view (list display).
How do you make the same object look?
I would like to continue introducing the OOUI (object-oriented UI design).
Last time, I explained about OOUI and object-oriented methods as an intuitive way to design a screen.
OOUI The main design book has finally arrived. Object-oriented UI design
This is the first time I've ever written such a clear description of screen designs that are intuitively useful. It is packed with valuable content that you probably wouldn't learn if you had to do a workshop with a designer all day long.
This time, I will introduce the screen layout patterns shown in this book.
This book summarizes basic layout patterns, such as how to express organized objects (products for product management systems, locations for Disneyland apps, and orders, products, inventory, accounts for e-commerce).
To be honest, I don't do much designs than this book, so even non-designers can easily create them if they are used as a reference when defining requirements and designing screens.
How to represent the same object
Before introducing examples, I would like to briefly explain why it is important to express an object.
Why do we need to use various display methods? This is because, as shown in the above diagram, differences in physical viewpoints can be expressed on the screen, making it easier for users to use intuitively.
The above diagram simulates how locations (houses, shops, etc.) are displayed as target objects.
When displaying a list, focus on the target text information. It's perfect for displaying what the location is and what it's called.
If you are looking for thumbnails, pay attention to the appearance of the target. You can see what the location looks like.
When displaying a map, pay attention to the target location information. You can see where the location is.
Looking at it this way, Google's Street View is amazing. By combining thumbnail display with map display, it conveys the appearance and location information to the user all at once, making it a valuable expression.
Example of collection view (list display)
So what is the way to express it? This time I would like to introduce some excerpts of the patterns in Collection View (list display).
One-dimensional list of one item and one line
A common pattern that lists many items.
One-dimensional list of multiple lines of one item
A pattern to be used when you want to display a list as well as provide more information.
One-dimensional list of multiple lines of one item (Variable height)
Commonly known as SNS type. The height is variable when images, text, etc. are mixed.
Thumbnail Grid
The image is centered around. It is easy to find even when viewing a list.
Mapping
A format that maps each object to a board with a specific context, such as a calendar or map.
It also covers basic patterns of so-called web design, such as the expression format of an object and the expression format of a task, so please check the book for details.