[UX Read] Designing Web Interfaces
6 Simple Design Principles to Get You Started
Okay, I know it is ironic to follow up my earlier review of #NoUI with a book on “Designing Web Interfaces”, but you have to know the basics before you can reinvent the wheel right? 😂
Any new and fledging UX designer would benefit greatly from the reading of this book, where its authors Bill Scott and Theresa Neil presents 6 design principles for web interactions through more than 75 design patterns.
Six Design Principles
- Make it Direct
- Keep it Lightweight
- Stay on the Page
- Provide an Invitation
- Use Transitions
- React Immediately
You can explore the 6 principles through the book’s companion site and I see myself heading there periodically to refresh my memory on the concepts.
Through reading the book, I realised that there are so many decisions and thought needed for online interactions! Take for example a simple drag & drop action, you need to come about how to make the action discoverable by the user, how to make the droppable areas obvious, how to present the items while being dragged, how to provide feedback that an item has been successfully dropped etc. Definitely more work than we credit online designers for!
Another key thing I learnt is leveraging the flow state where one is fully immersed and involved in an activity. If you think about it, the 6 principles aim to allow the user to be in a flow state while using the application, being focused on the task at hand and not be in any way distracted or disrupted.
Two of the design principles I really like are “Keep It Lightweight” and “React Immediately”. ❤️
The way I understand lightweight is having all of the tools or functions needed by the user just at the fingertips without having to dig too deep or do much searching to access. It’s also about understanding the context that the user is in and providing the necessary tools for that context.
And the ultimate lightweight design tool is Sketch! 👍🏻 It’s a wonder how it manages to cram all the essential tools within your view and surfaces the right functionalities when you need them. Much kudos to the creators & designers of Sketch!
“React Immediately” is really about providing instant or timely feedback to the user. I would say Google is the pioneer in this area with its Live Suggest function. Take for example the search I did below. The author’s name and image has all appeared even before I clicked Enter! Talk about being responsive!
My Take: I see this book as a classic that one can reference time and again and most importantly, to always bear the principles & patterns in mind when designing. It is also a great way to pick up the vocabulary of web interactions.