3. Review criteria
• Error recognition and
prevention
• Browsing efficiency
• Interface consistency
and clarity
• Aestethics
While reviewing the app, a special attention was
paid to interface and user experience.
In particular, issues emerged regarding to these
design principles:
4. Error recognition and
prevention
1. Bad error prevention
The system should prevent invalid inputs.
In the registration screen, users can send a void
phone number.
In this case, an alert warning the user to fill in the
phone number should be triggered near to the
relative field. Alternatively, input submission could
be disabled unless the field is filled in.
5. Error recognition and
prevention
2. Bad error diagnose
During email log in, users are not assisted properly
in case of wrong input.
When an invalid email format is filled in, it is
correctly detected and communicated to users.
The picture shows what happens if unregistered
users try to log in with the email, or if registered
users type in the wrong password: the error
message is rather unclear.
Alerts should inform exactly what the error is about
and help users to resolve it.
6. Browsing efficiency
1. Navigation menu
With only 5 sections, the navigation can be easily
designed as a bottom bar rather than hidden aside.
Hidden navigation entails low discoverability and
more work for the user, as shown in UX tests (e.g.
https://www.nngroup.com/articles/hamburger-
menus/ ).
7. Browsing efficiency
Here I propose a possible solution, a mockup of
the Connexun app home with a bottom navigation
bar.
Notice that I have replaced the «Notifications» tab
with a notifications icon, so the bottom navigation
does not conflict with tabs navigation, as a similar
spatial mapping is implied.
8. Browsing efficiency
2. Very long lists
Searching for an item in a very long list can be a
frustrating experience.
A simple solution is adding a search icon on the
top right corner, and/or a fast scroller on the right
side, which let users navigate alphabetically
through the list.
9. Browsing efficiency
3. In-context navigation
Figure 1 shows the «Content Language» screen
from «Settings» section.
In-context navigation provides a way to go from a
sibiling screen to its parent. The «Content
Language» screen lacks of the up arrow (the same
problem can be found in the previous «Spoken
Language» screen, page 8).
An example of up arrow in the «Settings» screen is
highlighted in figure 2.
Figure 1
Figure 2
10. Interface consistency
and clarity
1. Share icon
The «Share» function is represented in the app with
two different icons.
The first is the in-line three dots icon in figure 1,
and it appears in the news feed. The second type
of icon is the triangular three dots icon, and it
appears when a news article is opened (figure 2).
Choosing the same icon for a function makes an
interface more understandable for the user.
Figure 1 Figure 2
11. Interface consistency
and clarity
2. Dialog windows
When users add a profile picture, a dialog windows
pops up as shown in the image.
A dialog window should ask users a question in
order to make a final decision. In this case, the
interface is expected to propose alternatives in
order to reach the final goal - setting a profile
picture.
Choosing a dialog window doesn’t meet the
system interface coherence. Moreover, the option
«Cancel» as shown is ambiguous: does it dismiss
the dialog, or does it delete the photo?
12. Interface consistency
and clarity
In «My profile» users can upload a picture of their
passport to automatically fill in the profile.
When choosing a passport picture, a dialog
window pops up. This occurrence - although
different from the previous one - is not correct, as
there is no final decision the user has to take.
13. Interface consistency
and clarity
The bottom sheet is a more suitable component to
follow the user through actions that require more
than one step.
The picture shows a bottom sheet in Whatsapp
profile picture setting.
14. Interface consistency
and clarity
3. Tooltips
The pictures show an online article opened from
the «News» section.
A long press on icons correctly triggers a tooltip,
but the content of the tooltips is wrong. The
tooltips should show «Share» in figure 1 and «Open
in browser» in figure 2.
Figure 1 Figure 2
15. Aestethics
1. Margins
The picture shows a screen relative to a place from
«Points of Interest».
The phone icon is not aligned neither centered on
the screen and its function is not really clear. When
tapped, the dialer opens with the restaurant phone
number composed, so the user is just one tap
away from calling.
If the icon were placed just after the phone
number, it would make the screen neater and its
function would be clearer.
16. Conclusion Strongness:
fast and well engineered
mobile app
Weakness:
interface suffers from
inconsistency and
imprecision
While there are some design issues as showed, the
app is really fast. The signing up process is quick
and easy, and I have never experienced lags or
other technical issues, except one crashing after
the email was verified for my account.
For these reasons, the overall evaluation can be
resumed as follows:
