Informing the IBM Community

Top Ten user interface design tips, part 1

0
(0)

UI Modernisation

Back in the summer of 2013, PowerWire ran a three-part series by looksoftware’s Nick Hampson on the pitfalls of app interface modernisation that was very well received. Now we welcome Nick back for some more essential UI advice. To be an app design hero, read on…. 

In my top 10, I have resisted the urge to cover everything I thought was important or it would probably have become a “Top 326 tips”. That said, here are some of the core things to think about; the thought process, modern paradigms and so on. 

1. Understand that design is about how things work, not just how they look

As Steve Jobs puts it: “Design is not just what it looks like and feels like. Design is how it works.” 

Whether you like him or not, you can’t deny the fact that this single-minded focus has made Apple one of the most valuable companies on the planet. Too often, I hear people talk about design only in graphic design terms.

Let’s get this straight: graphic design is not UI or UX design. UI/UX design is about usability, productivity, learnability and many more things that add bottom-line value to your app. If you can’t assign value to your applications, I’d have to say that you should step away from them!

Now, that’s a strong statement but how can you create a good app for users if you don’t consider how they actually use it and examine their work flow?

I’ve argued this with some people for years and they would say: “Well, anyone can get a 13-year -old kid to add styling via CSS”. 

While CSS can control layout to some extent, it cannot modify the flow of the screen as set out in the HTML. As a developer, you need to understand optimal flow for data entry and lookup. The position and context of information dramatically changes how users learn apps.

Yeah, sure, it’s possible to learn to use even the most badly-built app, but people have a choice and if you ‘do it the right way your users/customers may vote with their feet. The methodology involved is not some ethereal skill learned by meditating in the high plains of the Atacama desert; there are logical rules and principals that can be applied.

 2. Design with the device in mind

You can’t apply the same rules to a desktop, browser, tablet and smartphone. You need to understand each device’s strengths and weaknesses. Design your interface to work around issues and play to the strengths of any platform you are deploying to.

Desktop apps are rich and have a full set of capabilities for communication and access to the host operating system. In the case of IBM i apps, you will need to consider things like keyboard buffers and typeahead to ensure that users coming from an emulator are not slowed down by new technology (browsers can’t do this, by the way).

So, given the choice, I would usually point an existing desktop user to a desktop app. They’ll get more functionality and productivity from the value you can add to this platform without being slowed down by a loss of features that they had in their old system.

For tablet users, you need to think about the 10″ screen and the fact that users will typically interact via touch. Don’t assume, however, that this will make tablets a content-consumption device only, as users are now very familiar with the touch UI and extremely productive using it. There is a generation of people in college today that use a tablet as their primary device. 

3. Different design for different needs

Are the users comfortable with the existing application (i.e. are they carrying baggage)? Are they experts in the subject matter or do you need to guide them through both the application usage and the subject matter?

What level of mastery is required? Do you need a simple system that is easy to use or one that caters for both first-time users and experts?

You might want to revisit the role of function keys if you have expert desktop users. It amazes me that developers are often reluctant to use function keys. Perhaps they are perceived as being an old-school emulator function. 

Adobe Photoshop is the most graphical tool in the world yet in order to use it to its full capability you need all the function keys and most of the keyboard shortcuts. I regularly use about 50. It’s not a fudge or bad UI; its incredibly productive. 

The moral of the story is don’t be scared of F keys for experts, just avoid them for average users and definitely for touch devices. Hint, they don’t have F keys 🙂 

4. Pay attention to what users do, not what they say

This is about understanding how people work. Many users may be experts in the subject matter but they are not necessarily experts in app design. They can have individual preferences about the UI which may result in a reduction in productivity.

Human preference is often skewed by experience and a fear of change. Design should focus on how it actually works. There are many cases in UI design where users express preferences that are counter-productive. One such example is text length. Research shows that while users prefer to read lines of text at full page width, they are actually faster reading thinner columns of data. 

5. Aesthetic has value. Deal with it. It’s not going to make anything worse

While much of what I have written here focuses on how stuff works not just how it looks, there is no reason for it to look terrible.

Firstly, there is a strong psychological advantage to making things look good. If it looks good users will assume it works well and is of high quality. They are much more likely to forgive minor issues. 

Every app has to be ‘sold’, either to end users or for cash. If you have a great system, why not package its usability, productivity benefits and user-focused tooling in a great look and feel? Honestly, I’d still love to know why 90% of the people I talk to are happy leaving this bit out.

Nick Hampson has been modernising IBM i applications for over 15 years, specialising in creating quality users experiences. Designing for desktop, web, tablet and smartphone, Nick works with customers to increase the reach, integration and business value of their existing IBM i applications.

Nick speaks world-wide for looksoftware at a variety of events including COMMON, NiSUG and lookahead. You can read his blog – ‘UI, UX, You what?” at https://www.looksoftware.com/blog/nick.aspx#.UaiXOaLVCVU.

Read Top Ten user interface design tips, part 2.

This article originally appeared on the looksoftware website at: https://blog.looksoftware.com/blog/top-10-user-interface-design-tips

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.