Increasing the UX of your Fiori Apps with just a few words

[arthursilva]

In one of my vacations to Brazil, me and a few friends went to a small town in the countryside of the state Sao Paulo - Brazil. On that time, we were a group of 10 including first-time adventurer and the more wild and experience traveller.

During the trip, we've jump into waterfalls, swim in small lakes, watching amazing sunrises and sunsets, talk with locals, taste great food (one of the best part at all!). The impression that I had in the whole experience was quite positive - Personally, I could do all this over and over and over and over again - but at the end (talking with some closer friends) I had the feeling that some of our colleagues didn't enjoy as much as we did. Maybe because some suffered a lot after a few exhausting walks under such hot days, or even because not all of them could swim in some of our stops on rivers and waterfalls.

After returning back home, I was struggling to understand why they didn't like such an amazing trip like this, so I decide to create an online questionnaire to collect those answer for a better understanding. Instead of creating online surveys using conventional survey platforms (e.g.: Survey Monkey), I've decided to create my own app able to perform the same task. By analysing the results, will be possible to track and identify the main causes of both positive and negative aspects of the trip.

So, let's go through the app initial version first. Before you ask "initial version first?" the app contains two different versions and both are quite similar in terms of layout, what differs within each other is the content and the metrics used in order to suggest a good experience (UX) for the user.

After the small talk, the purpose of this post

I intend to show you the challenge faced just after delivering the initial version to my kindly users (yes reader, besides the good app layout there were a crucial problem on its structure), and the solution used to turnover the problem.

Key points before continuing the reading:

Before proceeding, I invite the reader to pay attention in some of important aspects along the app itself. Those aspects are crucial when focusing in the User eXperience.

• The layout


• The content

According to Steve Krug, "It doesn't matter how many times I have to click, as long as each click is a mindless, unambiguous choice.”, so once again, keep your focus on the aspects mentioned previously. We're going to perform a deep (not so deep) analysis about the problem and the solution itself.

The Questionnaire App (initial version)

The app itself was quite simple, with a presentation screen greeting the user and a button calling for the questionnaire.

By clicking the "Submit" button, the user - let's call it as user for now on, is redirected to a signup form. I believe in once in life you've fill up some of those forms, and I might be wrong but most of the forms were quite similar than the form below:



After pressing submit, user is redirected to questions page. Questions were related to the experience in itself, through satisfaction, hostel hospitality and general costs. Users had to choose a grade from 1 to 5. For example:

• How likely is it that you would recommend this trip to a friend or colleague?


• How clean was your room upon arrival ?


• Local flight tickets were in the expected budget ?


• (and many other questions...)

And last but not least, users were redirect to the final page when the questionnaire is fully answered. Here, users are able to send comments about anything they would like to share. What I was expecting to receive here were both positive and negative aspects about the trip in the whole, or any other comment not previously mentioned on the questions before, or event comments about the survey itself. Feedback is always a great tool to explored the app capabilities.



Great, hun ? UI5 libraries, modern and responsive layout, but actually ... the survey has failed, and most part of the feedback received was related to the app rather than the trip itself. Also, most of questions had no answers at all. Why ? Let's analyse this point deeper.

Users feedback

Let's check a few feedbacks received and see what can we learn about them:

- What you really mean about ANSWER THE SURVEY, what the survey is about ?
- This is app is suppose to find me a friend for a travel?
- Texts are not self explanatory, like "name", "confirm" (what I supposed to confirm?)
- There is no questions reviewer once I answered all questions
- Five stars means good ?
- Five stars means bad ?
- Five stars means what ?
- 140 characters only ? You gotta be kidding

I believe some readers might be recognizing this situation with any other similar situation faced before. A weak communication might lead users for unwanted errors, or even making them uncomfortable.

Texts are not only words spread, but a dialogue between the app and the user. How would you feel in reading more informal texts instead of the robotic ones (Click here, to this, ...)

What can we do to improve this dialogue?

Basically, the miscommunication is a weaker point, and in the real world users might decide to use a different platform than yours if they don't really understood what you trying to say. For example, somebody couldn't fill up a sign up form just because did not understood what a input field "Confirm" means.

Micro copy

Do you remember the initial app screen, with a ANSWER THE SURVEY title. This is quite aggressive and means nothing. If we want to improve the dialogue, those texts should be replaced.

Nowadays, communication has to be fast and straightforward and titles and subtitles are quite important in terms of UX. Short sentences with impact are called micro copy and this is something to be concerned about when developing your apps. Why micro ? Imagine a long text in a very small mobile screen, it doesn't fit, right ?

Call to action

Also at the first page a button "Submit" was responsible to forward to the sign up page. Thinking carefully, the term submit is obsolete and related to "sending something to the server expecting no reply",  but actually the expecting scenario is to start a survey.

Call to action are important links that highlight for user's attention. According to Steve Krug in Don't Make Me Think: A Common Sense Approach to Web Usability, every click has to be mindless unambiguous choice.

“It doesn’t matter how many times I have to click, as long as each click is a mindless, unambiguous choice.”

― Steve Krug, Don't Make Me Think: A Common Sense Approach to Web Usability

Based on micro copy and call to action concepts, a more suitable approach for the initial screen would be:



Notice the title calls for the subtitle and for click action consequently. With a more human approach, we're dialoguing with user calling for the click button offering the opportunity to schedule and helding its next travel destination. The interface itself should purpose some benefit but asking for clicks desperately.

(check for the long texts in the image below, too much information in a very small screen).



The sign up form should be improved too, and texts might be replaced for a more human readable form. Do you remember the "Confirm" input field ?

The question view also needs some improvements, most of the controls were without any caption or references so let's make a few changes by adding captions on rating control. (1 - not recommend / 2 - Strongly recommend).



The feedback view was the most acceptable within views. The only complain was about the number of characters in the text area. In the whole, titles and subtitles were quite ok.

Finally, have you doing micro copies correctly ?

I invite all of you to review your apps with the following question "Are you apps dialoguing with your users?"

I hope you have enjoy it 🙂