- 101 UX Principles
- Will Grant
- 371字
- 2021-07-16 18:02:36
Chapter #7. Make Your Buttons Look Like Buttons
The flat design aesthetic, born out of Microsoft's Metro user interface, rose to near ubiquity in the late 2000s. In iOS 7 and Android's material design, these extremely minimal visuals are still the go-to look for modern web applications.
Flat design is bad. It's really terrible for usability. It's style over substance and it forces your users to think more about every interaction they make with your product. Stop making it hard for your customers to find the button:

The Metro user interface in all its "what is clickable?" splendor
There are parts of your UI that can be interacted with, but your user neither knows which parts these a, nor wants to spend time learning this. They have used buttons in real life, many times—on elevator controls, on their oven, and in their car—so they understand how a button works:

Buttons that exhibit visual affordances such as texture and pseudo-3D shadows (left) consistently perform better in user tests than those without them (right)
By drawing on real-world examples, we can make UI buttons that are obvious and instantly familiar. The human visual system is tuned to see depth, and by removing the illusion of depth from your UI, you remove a whole layer of information for the user.
Buttons in real life look pushable: they're raised or they suggest an obvious way that they might move if pushed. For example, they might have an indicator light and look more prominent when enabled. You should copy these features into your UI.
The inverse is also true: there are real-world buttons that don't look pushable—flat capacitive buttons on car park machines and coffee machines spring to mind—and these buttons are often accompanied by a stuck-on, handwritten press here for ticket note.
Using real-life inspiration to create affordances, a new user can identify the controls right away. Create the visual cues your user needs to know instantly that they're looking at a button that can be tapped or clicked:

Bringing flat design to the real world has consequences
Lastly, the opposite is also true: don't make non-button elements look like buttons if they're not.
- 觸摸屏實用技術與工程應用
- Augmented Reality with Kinect
- 辦公通信設備維修
- BeagleBone By Example
- INSTANT Wijmo Widgets How-to
- 3ds Max Speed Modeling for 3D Artists
- 分布式系統與一致性
- Hands-On Machine Learning with C#
- Apple Motion 5 Cookbook
- Rapid BeagleBoard Prototyping with MATLAB and Simulink
- 計算機組裝維修與外設配置(高等職業院校教改示范教材·計算機系列)
- 單片機系統設計與開發教程
- 基于Proteus仿真的51單片機應用
- 單片機技術及應用
- 新編電腦組裝與硬件維修從入門到精通