The user interface (UI) is everything designed into an information device with which a person may interact. This can include display screens, keyboard, a mouse and the appearance of a desktop. It is also the way through which a user interacts with an application or a website. The growing dependence of many companies on web applications and mobile applications has led many companies to place increased priority on UI in an effort to improve the user’s overall experience.
Armed with this information how can the designer create an effective interface? There are many new and exciting ways of creating this, VR being one of them but lets not get carried away by advancements in technology as this can have adverse effects on your judgement and those can create some epic disasters for instance lets look at the Apple watch interface as an example…… There are eight different ways to interact with it: Turn or click the knob on the side, tap or hold the side button, tap the screen, hard-press the screen, swipe across the screen and pinch the screen. Worse, the watch’s interface requires learning a mental map of the tiny watch screens laid out like an inverted T. Recent notifications appear as a vertical scrolling list, but “glances” (display screens for stocks, weather, battery charge, steps taken and so on) are arranged horizontally. There’s no logic to these layouts.
It’s easy to bang on about UI in such a tiny space so lets look at a desktop UI to compare it with…… Windows 8. The trouble wasn’t that Microsoft’s designers couldn’t design a good operating system interface; it’s that they designed two of them. Windows 8 had one environment for keyboard/mouse and a second, overlaid interface for touch screens. Each had a separate Web browser, Control Panel, e-mail program and type of programs. You couldn’t ignore either one. Twice the learning, twice the confusion—and people hated it. Microsoft ditched that approach in Windows 10.
Ok so if that was just what is good?
From my point of view until the technology is here to do things differently i.e. VR and AR, we should leave well alone (don’t dismiss it because it will be good it’s just not here yet) . So lets concentrate on what we have here already and build on that, and again I must emphasise on the design of your average user interface and the importance of keeping it simple and some key factors adhered to.
The first and most important part of any interface. To be effective the user must be able to recognise what it is, care about why they should use it, and then interact with it successfully. While there is room ambiguity and delayed gratification, there is no room for confusion. Clarity inspires confidence and leads to further use. A clear screen is better than a cluttered one.
Interfaces are there to inspire, evoke, mystify and intensify your relationship with the world, this is not art, this is a way to mange our expectations and give us access to services with clarity.
3: Conserve Attention
Don’t litter your screen with unnecessary distractions remember why the screen exists in the first place. Keep your primary goals front and centre.
4: User control
This is important, for example when you are doing something, anything you have some measure of control, the same should be with the interface. Unplanned interactions can lead to confusion and cause surprising outcomes like the user leaving your site or application (example pop up modals, too many and the user will leave).
5: Small Footprint
Design the interface with as little a footprint as possible. It’s easy to add more layers than necessary, we’ve all done it but recognising as much natural human gestures enables the user to interact with the objects in focus the less cluttered the easier it is.
6: Primary actions
You should support only one primary action per screen this makes it easier to learn and use, easier to add to or build on.
Do exactly what it says on the tin “Secondary”. You can add many secondary actions but remember the user didn’t come here to add the site to Facebook, he or she came here to get a service that the company whose site or application it is provides.
8: Natural next step
Very few interactions are the last so design a next step for each interaction, anticipate what that should be and design and support it, don’t leave the user hanging, a natural next step helps to further achieve a goal.
I could go on but I’m sure that this would be detrimental to this page and I want to show some example of good design, so heres a link to a great article on this subject
Tobias van Schneider
The most important reason is to “get to the point”.
Combined with a simple line-drawing icon, the app delivers such charming insights as “it’s fucking raining now” and “freezing cold like a fucking fridge”, set large in Akzidenz-Grotesk – fulfilling another of van Schneider’s goals, to show off the classic “more beautiful than Helvetica” typeface. Swipe up to share; swipe down to look at tomorrow or the day after; and pinch to show the temperature. And that’s it.
This is simplicity at it’s best no distractions I’ll even agree with the typeface chosen and it delivers a somewhat tongue in cheek response to the users query.
Ok that is an app but for a fully responsive application lets take a look at Alpaka.
So what is this I hear you cry ……. Well let me explain (and I think all will recall excel sheets), this is similar to excel and we can all recall how complicated that application can be, heck you might as well join up to NASA and complete a course in astro physics is how I would describe it (no offence Microsoft). Cut a long story short everything had to be done manually, even the formula for adding up or subtracting, a complete nightmare unless you knew how to do all that and even then it could take up several hours in the day. Not anymore this app will do just that in a few clicks and this is down to the clever way that the UI has been built cutting out complicated scenario’s and grouping interactions together.
So what is Alpaka ?
Alpaka is a real-time collaborative employee scheduling, absence management, timesheets, expenses and client billing application (their words not mine) built into cloud and works like a calendar.
The main functions are laid out at the top of the screen using a simple icon set to delegate each function which is simple to read rather than a plethora of buttons (note I find that using icons is a cleaner and faster approach to navigation rather than the button array that was used in the past this is taking from software like Adobe or Office literally and the user can relate to this more easily).
As we go into the screen (this is a single screen application) we can see a list of names along the left side of the page with a bunch of buttons that expand out, all relating to the icon set on the main navigation which gives you a primary array so that you don’t need to use the main set which is now secondary (note how the use of colour denotes that with a drop down colour chart to emphasise teams).
Let Phill explain more in-depth the functionality and watch and see how easy the UI is to use and note that there is no clutter and if there is then that can be hidden away until you need it.