A Quick Look at ambient UI

We’re now so blasé about our Computers, Phones and other devices , that what has become far more important is our experience when interacting with them. Over the past few years we moved on from the wonder, discovery and acceptance phases and landed directly in the impatience phase. If you don’t think this is true here’s a little thought exercise for you:

Image by Gleb Kuznetsov✈ 

Quick test

The next time you are in an elevator and the door takes about 5 seconds (yes 5 seconds) to start closing, do you or someone in the elevator hit the close door button? Now think, after the button is pressed and the doors have started to close, do you feel better or at least less impatient?

"Ok brace yourself”

In a study by the New York Times, 3,250 elevator close buttons were tested, most were found to be mechanical placebos with a mere 120 working buttons found. That’s right, just over 3.5% of the elevator close buttons actually did something.

Ambient Computing

This brings us to ambient computing. Today’s user, expects things to ‘just work’. Look at keyless cars. If the driver is close to the car and has the key in their pocket, the car just opens, making the pressing of the unlock button unnecessary. In the same vein, we are slowly falling in love with virtual assistants to avoid tapping those buttons. Why navigate through pages and menus when you can just talk to a chat interface and order your next coffee, turn off the lights or play a music track.

In the same way that your phone most likely no longer has a physical keypad and has beefed up its voice-based assistant,  you can now talk to your car, your lights, your watch and even your fridge. How many times have you set timers, a reminder or asked how to spell Goondiwindi (sorry just need to ask Siri and he/she got it on the second try). Interestingly, Google Home could not spell Goondiwindi after several tries, "I guess you can’t believe what you see on TV (Google Home TVC)"; without even needing to tap a button. Just speak and your house obeys.

I am willing to admit that I am worse than most here. My lights turn on when my phone connects to my home wifi, my front door unlocks when my smart watch is within 2m, the security system turning on, air conditioning turning off if my smart watch goes more than 100m from the house and so on.

With your BMW having keyless entry and go, gesture control and self guidance assist, your iPhone containing a modified PowerVR Furian GPU and iOS 11s AR kit, Hue lights, Kwikset Kevo smart lock and Alexa added to your LG fridge. This all means that you can drive home listening to you favourite music, park your car, find that your fridge has ordered groceries (having consulted www.foodswitch.com.au beforehand to improve your health), your front door unlocked, the lights on and the house at the correct temperature all without tapping a button. Oh and you will be able to look through your phone screen using AR to see exactly how to make the meal your fridge has ordered for you.

That’s right you or other machines are talking to machines. We humans just sit back and expect results.

What does that mean?

So what does that mean for the average business looking to develop a website currently?. At it’s most basic level, as we expect our interactions with technology to be increasingly seamless, it means a lot more development expertise will be required. And definitely means that you can never set and forget your site as the oncoming iteration is even more important than it’s current state.

This is because removing the interface is not a magic trick, it’s the development protocols and systems that take the place of user interface, and that’s a lot harder than it seems. Designing and building protocols is far more time intensive and requires a deeper understanding of the user’s needs and human systems or expectations as we map methodical freeways of human-designed protocols.

The way we interact with Devices is taking its first evolutionary steps since the 70s. So it's time to make sure you have a good relationship with your UX team and have a strong team of developers because at the end of the day you're users will simply expect it.

Building Better Forms

Forms are one of the most important conversion components of UX design. In this article I will be focusing on common dos and don’ts of form design. Keep in mind that these are general guidelines and there are exceptions to every rule.

To Many Fields

One of the most common errors made is requiring more information up front than is absolutely necessary. For every field, ask yourself if the value of the data is higher than the loss of the user.

The questions I ask here is: Am I happy to loose 10% of the users to get this info?

This means that of the 100 users that started your form only 53 will submit the info after 5 fields.

Other things to consider here are high risk fields like phone numbers, date of birth and weight. Try to remove the need for fields like these or only display them to your most engaged users.

Aligning Field Labels

In the Western world we have been conditionedto read from left to right and from the top down. For this reason you will see much higher completion rate with top aligned labeled forms than left aligned labels. Aligning your labels above the entry field will also translate well on mobile.

That said, you should always consider your audience:

• Are they only using desktops?

• Where are the from?

• How computer literate are they?

The big downside with using a top align label is the level of consideration users give to each input. Left aligned labels mostly have a higher level of consideration to the data entered. Also for large data-sets it can make the form look smaller. This gives the appearance that the user requires less effort to complete the form.

One Column

We live in a world of long scrolling. Multiple columns disrupt a users momentum both loosing the context of where they are and adding to the cognitive load required. This also applies to Checkboxes and Radio buttons.

Grouping and Labels

Reduce the concentration a form requires to complete by placing the label and input fields close together. It is a good rule to allow at least half the field height between each label and input group.

Also group batches of content into similar types. This will have the effect of making your form feel less overwhelming and will be clearer to your user, allowing them to complete the form much faster.

Avoid All Caps

All caps can be difficult to read especially at a glance. Try using title or sentence casing. But this can also raise some issues. Check out this article for how to title case: http://www.onlinegrammar.com.au/title-and-sentence-case/

Show Selection Options

Placing options in a selector drop-down requires two clicks, and hides the options. Use an input selector if there are under 5 options. If your drop-down is more than 5 options you should look at adding filtering or sub-groups as it is better to show 2, 10 option drop-down fields than 1, 20 option drop-down field.

Placeholder Text

It is always a tempting option to use placeholder text as your labels.  We all have done this at some point and it can make your design look far cleaner and your form look shorter.  Unfortunately this will make it difficult for people to remember what information belongs in a field, and to check for/fix errors. It also poses additional effort on your users' visual and cognitive load. In short this will kill your completion rate.

Inline Errors

How often have you got to the end of a form only to find it will not submit and the only indication of this is a little red message at the top of the form, that is almost always not displayed in your current page view.

When displaying errors, always show the user where the error is, provide a reason in clear easy to understand text that is placed in the location of the error. Also indicate that there was an error around the submit/next/save... button.

Try to not use inline validation as the user fills out the field unless it helps to complete the process ie. a multi-line text box with a character count. Having a field change as the user is typing will distract your user, increase the difficulty of the task and reduce the complication rate.

Helper Text

Ditch the “i” button at the end of a entry field. It is always better to display helper text wherever possible. You will get much better quality inputs by showing short well written helper text than long detailed helper text hidden under a button/hover state. If complex helper text is needed, try only displaying it when the field is in a  focused state.

Field Length

The length of the field should indicate the length the the information required. Think about fields that have a defined character count like phone numbers and post/zip codes.

Field Type Restrictions

It is also tempting to only restrict the data entry type to number or character count in phone numbers and post/zip code fields. It is worth noting that many modern phone numbers and post/zip codes have special characters or text in them.

Mandatory and Optional Fields

We always seem to add a (*) to indicate a required field. It is worthwhile considering that users may not understand what this means. Try adding optional (yes the actual word) beside optional fields as users know the need to enter information. But if it is up to me an optional field equals a field that is not required so why are we displaying it again?

Why ask?

Wearables, Mobiles, Browsers and Password Managers collect large amounts of data without the user’s consciously aware.

Think of ways you can leverage this data through: conversational UI, SMS, email, voice, OCR, location, fingerprint, biometric, etc.

Call to Action (CTA)

A call to action should state your intent but this should not be at the detriment of your site or apps personality. It is always a good rule to think about the reaction and perhaps try being less confronting. For example, instead of a Read More button try using Continue Reading.

Personality is Key

No one, Yes absolutely no one wants to fill out forms. Try being conversational, funny and gradually engage the user. If done correctly, it will increase completion rates. That said it not worth doing this if it breaks the rules outlined above.

HUMAN-CENTERED DESIGN

The human-centered design approach is all about communication, that's right, your Interface should use everyday language and the Snapchats of the world aside your interface should not require a steep learning curve or your users to be a member of the in crowd.

An interface should feel like a good friend, whom is always ready to help out at a moments notice.

BE HUMANS NOT A ROBOTS

93% of how humans communicate is non-verbal (55% body language and 38% tone of voice). Much in the way that what we say is only a small part of what we're communicating, text and imagery is only a small part of what your interface is communicating

- “Albert Mehrabian - Professor Emeritus of Psychology, UCLA”

In this way your interface needs to tick these three boxes:

• Provide feedback to actions
• Show direct manipulation queues
• Display results of actions in an expected way

1) SHOW WHAT’S HAPPENING

The first usability heuristic principle by Jakob Nielsen states: keep your user informed about what is happening.

Users expect to get responses immediately. As we know this is not always possible. In cases where you cannot show immediate results or a skeleton load, try displaying an interesting (or odd) animation. Now we have all seen loading bars and spinners. Whilst you can make do with these, you should try to go beyond the simple and possibly give your user a smile. 

In my world of Smiles and Cry’s, think smiles and not hair pulling out finger tapping frustration.

2) CONTEXT IS KEY

With many different smart things being worn, carried and interacted with on screens of all sizes, it’s highly important to provide clear navigational divides between different pages. A user must understand where they are at all times and have a clear way of navigating back, undoing options and seeing all stages of progression.

3) STATE CHANGES SHOULD BE CLEAR TO ALL

You often need to change out buttons and states on your site or application as a user interacts with it. Simply replacing a button or line of text can easily be missed by a user. That said there is no need to go overboard and show big pop-up notifications for minor changes. A small animation will/can attract the eyes of a user guiding them to that piece of important information or state change.

4) MOVEMENT /ACTION

Micro-interactions must help users understand/how to engage with an interface no matter how uncommon or unfamiliar the interface is. Apart from helping a user effectively interact with an application, micro-interactions have the power to encourage users to keep on browsing, like, or share content. Basically they are a key part in convincing users to take the next step.

5) INPUT PROGRESSION

Form completion (Data input) is one of the most important elements of any application or site.  Forms are pretty boring and are only as effective as the information entered. 

• Always guide your user (tell them upfront) how many steps involved in the form,
• Make every field feel like progress in completing the task
• Give constant updates to the user as they progress so they don't get to the end of the form and find they made an error 20 questions ago. 
• Make the input type clear (give examples of what input is required) 
• On particularly long forms it may help to cheer your user on at steps throughout the form. 
• Of course never ever have an input field that is not absolutely required, we've all seen results of how much drop-off is caused by every additional field

For more on forms see Getting Forms Completed

6) TUTORIALS

With a new site or update to your application be sure to inform your users on the changes. The best way to do this is to train your users through the use of an example fly through (tutorial). 

A quick note here: always ensure your tutorials are annotated clearly, have an obvious forward and backwards progression and allow your user to skip or access the tutorial within a single action.

SUMMING IT UP

So, if you value the experience of your users, UX matters. How your users feel when using the product is key to adoption and creating advocates for your application or site. Even minor details deserve close attention. You should always aim for approachability and simplicity no matter the complexity of the logic behind the interface. 

What's Coming in 2017

2017 is in full swing and we’re super excited for some of the new app and web trends we can expect to see this year!

VR and AR

In 2016 we had a taste of consumer Virtual Reality (VR) and Augmented Reality (AR). While we’re still in the early stages of exploring these technologies, it looks like 2017 will be the year that they’re going to be on the menu for the masses. This year, we will see many products implement self-tracking headsets and get rid of external tracking systems. Inside-out tracking seems set to become the next big leap, though it might still make you a little dizzy.

 

Prototyping and Interaction Design Tools

There have been over 30 different prototyping and interaction design tools launched in the last few years. This is a clear sign that there is a strong demand for this kind of communication. Whether you’re designing a simple user flow or a multi-screen app, having the ability to communicate new interactions and animations to stakeholders is one of the key milestones in getting work approved. 

Prototyping tools are making this step cost affective,  allowing everyone to be on the same page as well as allowing the work to look amazing.

Examples  of some Prototyping Tools:
framerjs.com

UI Pattern Libraries and UX Research

Watch out for UI pattern libraries and style guides as they will become mainstream, making user experiences more consistent, practical and usable. With more businesses realising the importance of design thinking and UX research, designers will become more involved in strategy rather than just the visuals. Example: styleguides.io

 

Natural User Interfaces and Bot Interfaces

We will see many more conversational interfaces this year as they are quickly becoming an essential component of every service and product. At CES (Consumer Electronics Show) Alexa was in everything from a LG fridge to a Ford F-150 and even a smart bed cover. With Google Assistant and Siri soon to follow, talking to yourself will soon be the norm.

 

Less Fragmentation in Mobile

Let’s get streamlined! There will be fewer apps, less fragmentation and a movement towards a more centralised digital experience. Yay! Integration between mobile, social and commerce will grow and become more popular as we redefine our relationships with our devices. That's right it's not just going to be what’s on your screen your device will be your key to real world devices. From unlocking your front door, becoming your ATMs biometric reader, your credit and even your doctor with glucose and blood pressor monitoring.

 

Messaging

Feel like you’re checking countless apps to see if someone’s messaged you? Well guess what? Messaging will keep growing! More and more businesses will offer their services within the messaging space. But before you get inundated with notifications, it’s not all bad news. Expect to see message aggregates pushing all of your message types into one location.

 

Machine-learning

Rise of the machine-learning! Through machine-learning we will be better able to redesign content to fit the individual. We will be able to study individual’s online usage patterns and become better able to predict someone’s needs and anticipate their (future) actions.

Example: https://youtu.be/dcZvhP-IqY4

 

Humanising the Digital Experience

We’re going to see more and more thought and attention put in to interaction, on boarding and empty states. The use of everyday language will become widely adopted to encourage users to take action. Expect to see thoughtful suggestions and personalised notifications from within your apps.  The “Got It” button and the how to screen will become the norm.

What We Saw in 2016

Usability Trumps Coolness.

Say it with us smartphone makers: BATTERIES BEFORE BEAUTY. It’s all about engaging the user and adding value to their life on a level they care about.

Goodbye Hamburger Menu.

Facebook, Google, Apple, YouTube and Microsoft have already ditched it and others will swiftly follow. As awareness grows for the disadvantages of the hamburger menu on a user level, more designers will abandon this solution.

Emotional Engagement

We saw a big shift in Emotional Engagement with Video of course being our star player here. Animated GIFs and short videos are being used to increase engagement by amplifying the emotional experience, here’s one of our festive tear jerking favourites from 2016.

Typography

Got bolder and bigger, we saw an increase in Italic, all caps, oversized fonts, and handwritten fonts, and the use of large typography in combination with a minimalistic approach. Speaking of minimalism, we expect this is going to be an ongoing trend, with large background images, ghost buttons and flat design.

Colours

Have been using a palette in combination with bright pastels and bold accent colours, here’s an interesting video on designers reacting to the Instagram update this year.

Loading…

Loading… please wait, How about all those subtle loading states, supporting animations and how to intros. 2016 took infinite scrolling to the next level. Sites have been implementing modular scrolling, and scroll sections independently.

And finally, goodbye to overbearing hero carrousels. What point is there in giving users a way of navigating somewhere without telling them what they will be presented with?  If you present users with a carrousel, at least give them a notion of what to expect, naming the buttons, perhaps?