To Those Who Thinks UI is Hard
Tags: design, ui, interface, programming
Published: 2020-04-14 01:44:57

This is a short essay for programmers who think designing UI is hard, but find success in designing Rest API, CLI, Custom IPC Protocol, maintainable C header file, etc.

Easiest way to approach any kind of design is to identify the consumer first. For UI it's the user and their task. Measure their capability, what they're good at doing and not, and optimize from it. 
Human is capable of short spanned attention, short memory, and pattern matching. They're not really good at / fond of remembering many things at once, imagining big numbers, context switching, doing boring work, and waking up at 6 on holidays.

Once identified, you'll know the part of the task your software should do and the part you can leave with to user. This is the same reason why you most likely won't find an RPG game where the computer moves the main character and the player rolls the dice. Optimize around it.

Hand the user control of what they can do best, your software will be seen as useful. Make your software flexible by opening up a way for user to operate on deeper and more complex layer by hiding them carefully so that it is accessible through the user's careful perception, e.g. the "advanced setting" button. Be transparent to the user about what you're doing with the software, tell the users the complex things your software is doing for them and your software will be educative. 

Those are the important thing. Platforms (browser, mobile, html, native, electron, QT, unreal engine) are secondary and frameworks (react, angular, svelte, vue, flutter, bootstrap, bulma css, styled components) are tertiary.

Use these concepts to help users understand what you're showing. Color helps with intention, red is danger, green is positive, blue is secure. Contrast helps with directing user's attention. Transition and animation help with retaining context in user's mind. Spacing helps with separating concerns. Grouping and hierarchy helps with... well grouping, and hierarchy. There's a lot more. Typography, focal vs periphery, shapes, interaction design, information architecture, gestalt etc.

This is the same principle as any other design process. Product design is almost the same in concepts and tooling, with the exception the jargons are more high level and human. Graphic design, not that different. API design replaces human with software, with slightly different capabilities, less volatile memory, more costly pattern recognition, and far more resiliency to boredom. Protocol design's consumer is the spirit of the convention, extensibility, and forward compatibility. Developer experience is User Experience in disguise.

Next step would be how to be the consumer. This is the easy part. The frontend consumes backend's interface via Web API and ajax, the process consumes machine resource via system calls, etc. Distributed instance consumes unity via RabbitMQ. It's the easier part because you're supposed to be served. Don't over-complicate.

I barely scratched the surface, but hopefully, this will set the right mindset. I exposed some keywords for you, the readers, to explore if you wish.