OS features are a big reason why we build apps instead of just mobile websites. They can provide a much better experience.
Some examples of useful features:
control center (for example when you have a music stream in your app it should be possible to play/pause the stream in the control center)
push notifications deeplinks (when users share content from your app, this should open the exact content in their friends app) always check out new features of the operating systems, there are often new possibilities to improve the overall UX of your app by adapting to new features of iOS and Android.
widgets, like this news widget and next game widget we built for the HSV app:
What are features that you are still missing from iOS or Android operating systems? Send me a message if you would like to exchange ideas!
Making your app accessible is important because you want to make it usable for people with disabilities. You probably already have that in mind. However, i want to remind you that there is also „situational disability“ and that the number of users, who benefit from your efforts in making the app accessible, is much higher than you might think.
For example, when you design your app to be used easily with one hand, you’re not only doing that for people with one arm, you’re doing it for everyone. Anyone could be in a situation where they can’t use both hands to hold their phone. That’s an easy example but the same goes for seeing, hearing and speaking. Designing your app in a way that it is easily usable, really benefits everyone.
Object-oriented UX is a concept i learned about this year, when i attended two talks by Sophia V. Prater. In short, it is about designing objects before actions and about considering how our brains work. You should read this article or watch this video to get more detailed information about it by Sophia, who developed that concept/principle.
A design is intuitive when it behaves how a user expects it to. Well, what do users expect? Whenever we find ourselves in a new environment (physical or digital) we want to know:
What are the objects here?
Where are the objects?
How do these objects relate to me and to each other?
Without knowing what and where the objects are, we feel blind. Navigating feels uncomfortable. Taking action might even feel impossible. That’s also the case for digital environments, so we should make sure all objects are easy to identify and not misleading. Make it easy for a user to predict what’s behind all objects, buttons etc.
avoid shapeshifting objects
Objects in the real world don’t usually change form as they change context. When I bring a new toaster home from the store, it doesn’t change into a different toaster. In a digital product i might also be confused if an object looks different in different parts of the app. Things that are the same should always look the same.
context aware design: delivering the right information to the user at the right time (source)
We are all different, so why should the apps we use behave the same towards everyone? An interesting aspect in mobile UX is personalization. It focuses on creating experiences that adapt to the user. Similar to adaptive design which adapts to different devices, personalized UI adapts a layout to a person. Mobile app UI design might move further away from being device-focused, and move closer to being user-focused, personalized.
How to make apps more personal
You can implement personalization features during the onboarding of a user (e.g. letting them select their favorite topics) or look for ways to create push notifications that relate to the users last use of the app. Check the information you already have about the user. How can this information help to improve the user experience with personalized features? Of course you should not make it creepy and be transparent about which data (like location) your app requires.
You can use data to segment your users. Users can be sorted according to device, location, space, amount of purchases and time spent. This allows you to make personalized campaigns for particular segments.
In addition, you can look for ways to determine if you should increase the font size, decrease screen brightness, eliminate flashing images or sound. Many apps already have such options in the settings.
I am still looking for good examples in this area, so if you know an app which has some cool personalization features, please send a message!
Navigation is an essential part of the user experience. There are many different options and you should choose one that suits your content best.
This nice illustration by Scott Hurff shows which areas of the screen can be touched naturally and which need stretching of your hand, and the red ones are those that hurt:
To me, this is so important that i switched from an iPhone 7 to an iPhone SE – just to be able to use my phone more comfortably with one hand and to reach into the corners easily.
When designing an app you have to think of the context in which your users use it. On top of that, phones keep getting larger and larger. Therefore we have to keep in mind how people will hold their device when using your app.
According to research by Steven Hoober, 49% of people use their thumb to tap/navigate, while holding the phone in one hand.
right thumb on the screen: 67%
left thumb on the screen: 33%
Only about 10 % of people are left-handed so the 33 % suggest that people use their phone while doing something else with their right hand. (source)
So what can we do, knowing about these challenges?
Easy to reach area: Design for the thumb zone, the natural part. You should put important navigation items there, which are used most often.
Hard to reach area: keep infrequently used actions there and place negative actions (such as delete) in the hard to reach red zone, because you don’t want users to accidentally tap them.
Swipe gestures: when you have a back button in the top left corner, always implement swiping from left to right as well, to give the user this option to navigate. Drawer menus can also be implemented in a way that allows the user to swipe it in, for example from right to left.
Finding the right navigation style for your app
A tab bar (also called „bottom bar“) is suitable in many situations, especially if you have three/four main features. A drill down menu/navigation (structuring the views in a hierarchy from the top downwards) might be a good choice if you don’t have a very complex app. The burger menu (three horizontal lines) should be avoided because it can be problematic as it hides a lot of information. It is even considered by many as the main reason for poor user engagement. A gesture based navigation is tricky because it’s hidden, but since Tinder and Snapchat many people are used to it. I guess it really depends on your target group.
what should you consider for your navigation?
because of big screens: the navigation bar (in the top area of the screen) should more often be replaced with more reachable navigation
make it consistent, don’t change the location of navigation controls
the navigation should communicate the user’s current location in the app
make it finger-friendly, not to small touch targets, keep enough spacing between controls
As a disclaimer, i must say that this part of my talk/blogpost series is influenced and almost a summary in my own words of this blogpost, because i found it contains all relevant topics that i also encountered and wanted to point out.
Push notifications are a very effective way to engage the users of your app. But if done wrong, they can do great damage to the user experience.
„The good thing about notifications is they remind your users that your app is installed. A bad thing about notifications is they remind your users that your app is installed.“ – Sam Jarman
71% of users who uninstall an app, do this because of annoying notifications (source).
What can we do to prevent this from happening?
Initially, we can ask for permission carefully. We should use one additional alert to explain the value of the notifications to inform the user about the benefits of allowing them or even why your app doesn’t make much sense without them (if that’s the case). When you do that before the official permission alert, the acceptance will be much higher.
Try to find out the suitable amount of notifications to be sent to the user. Of course, the tolerated amount depends heavily on the purpose of your app. There’s basically no limit if you have an app where users follow a live soccer event (like the HSV app we built at Evenly), but the limit for a tolerable amount might be very low if you want your users to do/purchase/use something.
Think about the best timing for each notification. Keep in mind that your users might be in different time zones and check out if the push service you’re using has the option to send out a notification in the local timezone for the user.
Be precise, you only have a very limited amount of words. Maybe you should practice your copywriting skills by using twitter 😉 Or just hire a good copywriter who knows their craft.
Make them relevant: try to personalize the notifications and not send the same content to everyone. If it makes sense in the context of your app, let users choose their preferences and respect those. (I once deleted a news app because they sent me push notifications on topics i didn’t select). You can also personalize them based on the user journey, for example for new users or for users who have an item in their shopping cart.
If it is suitable and helpful, you can use the location of the user. If it’s a travel app, you can provide a relevant feature/information.
In most cases it makes sense to use a 3rd party service, so you don’t have to worry about scaling and reliability and can use their features. Make sure the provider is able to fulfill your needs, like extremely fast push notifications (again, think if a soccer app where your users want to be notified about goals instantly). You might also want to use rich notifications. You can add a picture, a title and a body text. And a little side note: don’t use them for ads (at least this is forbidden by Apple).
It is helpful for the user to see the current status of what’s happening in the app. Examples include showing a „loading indicator“, a „pull to refresh“ animation or an animation that indicates a problem.
2 navigation and transitions
Animated transitions explain changes in the screen and provide valuable context. When a button changes its function (e.g. a play button turning into a pause button or the change in the example below) it can be helpful to animate this transition so that the user understands why there is a change. You can also use them to show the visual hierarchy between objects. This example (source) shows several transitions where the state changes:
3 visual feedback
This might be the most important animation because a lack of visual feedback can be really confusing. First of all, we want to make controls appear tangible and when they are tapped we need to provide a visual feedback to reassure the user that tapping it actually worked and then visualize the results of the action.
This GIF (source: Material Design) shows buttons responding to a user’s tap:
Dieser Beitrag ist auf Englisch weil es um einen Vortrag geht, den ich dieses Jahr ein paar Mal gehalten habe, jeweils auf Englisch, und ich die Inhalte für die Leute bei den Events zugänglich machen möchte. Häufig lädt man als Sprecherin ja nach dem Vortrag die Präsentationsfolien irgendwo hoch. Da auf diesen jedoch kaum Text steht, möchte ich das ganze jetzt in mehrere Blogposts verpacken.
This year i started giving talks at conference and other events. When the Codemotion team asked, if we (Ladies That UX) would like to be part of their program on the community stage, i agreed to give a talk there. Here’s my abstract on the Codemotion website. If you’re good at using Google, you might find the audio recording of that talk, but i don’t want to share it because it feels so strange to hear my voice and honestly, i don’t feel confident to share it with the world. ¯\_(ツ)_/¯
The topic of my talk is something i have focused on during the past +2 years in my current job as a product/project manager at Evenly: the user experience of mobile apps. I collected a bunch of sub-topics and gave it the umbrella-like title „7 aspects that improve the UX of your app“. After Codemotion i also gave that talk at the Product Camp and at Devfest, refining and changing it a little bit each time, and then finally i presented the talk at our Ladies that UX anniversary meetup in November at Researchgate.
Every event was different but it was always a fun challenge to be a speaker. I prepared it quite last-minute during three days before the first presentation because i needed the pressure of the deadline, but that worked well for me as everything was quite fresh and still in my short-term memory 😉 I would like to thank everyone who listened, took sketchnotes, tweeted about it, asked questions and gave feedback. It was extremely rewarding and motivating when people told my they learned something from that talk, because that was my main goal. It should be suitable for anyone who is interested in User Experience and Apps. If you have no experience in this area yet, it should give you a helpful overview and if you are very experienced, it should contain at least some useful reminders. Please note, that it’s not a full guide on how to create an UX concept for apps but more like a selection of my current favorite topics in this area.
In the future, i would like to improve the design of my slides and for the next public speaking gig i will probably focus on one topic instead of compressing several topics into one presentation. Let’s see what 2018 brings…
Instead of just uploading the slides, i would like to transform the content into 7 blogposts, to be able to share it with more people and maybe get some more input. So in the following 7 days i will publish one blogpost each morning. At least that’s what i’m planning to do.
Es gibt ein praktisches neues Feature bei Spotify. Nach dem Prinzip der Snap Codes von Snapchat ist es durch diese QR-Code ähnlichen Codes mit der Spotify App abzuscannen und sich so das Eintippen eines Suchbegriffs zu ersparen.
Da gibt es einige Anwendungsfälle, in denen das sehr praktisch sein wird. Einmal das Empfehlen an Freunde (ich halte dir den Code hin, du scannst ihn ab, zack fertig) und dann natürlich die Möglichkeit für Künstler, den Code zu ihrer neuen Single direkt auf ein Plakat zu drucken, sodass man es unterwegs in der Stadt im Vorbeigehen superschnell finden, anhören und speichern kann.
Und natürlich bietet es sich auch an, die Codes im Netz zu verwenden. So könnt ihr das jetzt zum Beispiel mal mit den vier Empfehlungen, die ich oben gepostet habe, ausprobieren. Dazu geht ihr einfach in eurer Spotify App auf den “Suche” Button und tappt das Kamera Icon, welches sich nun rechts von der Suchleiste befindet.
Um einen Code anzuzeigen geht ihr einfach bei einem Song auf die drei Punkte (wo sich auch die anderen Optionen wie Speichern/zu Playlist hinzufügen/Teilen etc befinden). Da wird dann das Artwork mit dem Code angezeigt – um es abzuspeichern einfach drauf tippen.
Wie cool ist das denn? Ein Eichhörnchen Plüschtier als Game Controller. Um im Spiel Nahrung von den Bäumen zu pflücken und Hindernissen auszuweichen, muss man das Eichhörnchen anheben. In seinem Bauch befindet sich ein Arduino Leonardo mit Lichtsensor. Und natürlich viele digitale Haselnüsse.