Making of a Web App is Synap Software’s step-by-step look at designing and developing a web app. In this article I share one iteration of an evolution of web application design layouts for PlaybookIQ.
I set up a flickr photostream to show screenshots as they evolved. Read the rest of this blog entry first, and then go check it out.
Key points of visual design for web applications stated as expectations from people using your application:
- Proximity: items near each other are related to each other..
- Relative size: larger elements are more important.
- Relative position: elements to the top and left are more important. Elements to the bottom and right are subsets of ‘parent’ elements above and to the left of them.
- Consistency: consistent fonts and colors make an application feel more reliable and well constructed.
- Inconsistency: an occasional inconsistency should mean that something is important or needed to be called out for some reason (e.g. red text when all other is black).
- Persistent elements like ‘home’ or ‘search’ provide confidence to roam around knowing they can always get back to familiar territory.
- Sign posts: let people know where in the app they are.
- Alignment: an application in which elements line up neatly vertically and horizontally feels more professional, is more trustworthy, and easier to use.
- Whitespace is easily understood as way to separate elements that are not directly related, while a line, shading or other elements must be processed by people scanning a page.
- Context is critical. Metaphors like tabs, sign posts, and grouping help people understand what to expect at a given point in the app and helps people focus on one thing at a time.
- Choice is painful and slow. People simply want to get something done. People do not want to be asked to perform the work of making choices. Keep navigation and activity choices to a minimum.
Refreshing But Professional
In a B2B app such as PlaybookIQ, my design goal is to offer a refreshing, yet still professional experience. I do not want to get too innovative or revolutionary and design and development time to create a wow factor could be better spent on additional features that make people’s professional lives more productive. So, you should expect to see common design decisions here.
A Case Study
This series could be subtitled ‘A “Designing the Obvious” case study’ because it follows along with suggestions made by Robert Hoekman Jr. in his book. Click here for details on the book and here for his blog. [Full disclosure: when I write reviews or references to books, I usually link using my Amazon affiliate link. If you do not want to visit my affiliate link, simply do not click the links in my blog to books and instead search for the book directly at Amazon or your favorite source. Note that so far in this series I’ve made a whopping $5.15 from this practice – early retirement, here I come! ]
Screenshots on Flickr
For the rest of this blog entry, I have set up a flickr photostream with a description on each photo in that outlines the thought process behind the incremental change from screen shot to screen shot. I put the screenshots on flickr because I like the way you can page through them and it is easy then to pick out the changes from screen to screen. If I just listed them here, readers would be scrolling up and down to compare one screen shot to the next.
Click here for the photo stream. You can leave comments on this blog entry or on flickr.