How to deliver better user experiences as a Swift developer?
Learn the basics of user experience design with some accessibility tips that you can use immediately to build better mobile apps for everyone.
Swift is all kinds of fun but have you ever tried UX? Of course you have. Everything you use results in a user experience. Following that logic: everything you create and going to be used by others will result in UX, too. But what is it really, and where do designers & developers fit in the picture? Letâs find out.
User Experience Design
There are tons of articles about all the different types of designers, and I could write my own, too, but letâs skip that for now. The only thing Iâd like to mention is that I personally donât like the title âuser experience designerâ âcause it can be misleading. Companies with little to no experience with design professionals expect you to magically figure out the best UX: âcause thatâs what you do, right? Wrong.
User experience is a phenomenon happening to anyone using a tool. Any tool. Do you post on Twitter? Itâs UX. Do you read your mails on your iPad? Itâs UX. Do you drink coffee made by an old metal coffee maker? UX. Did you just buy a new chair from Ikea and you have to put it together? Same. Did you just sit to your brand new chair to enjoy a good cup of coffee? Still UX. âïž
But can I design these things? Can I say youâll do all these things in this specific order from start to end and youâll like it? Nope. Can I map possible ways of that happening? Yep. Here we go.
User Experience âDesignâ is about understanding the needs (you want to drink coffee in a comfortable chair every morning before going to work), and then giving tools to fulfill them. Of course I want you to achieve your goal as easy as possible, so Iâll try to understand how you do things now, and how can I change those things to improve your situation. Then Iâll figure out a way and define an âexpected user experienceâ and set up things for you to get it. After youâre there, youâll get the real user experience, which might be a lot different from what weâve expected. The goal of UX design is to get the expected UX as close as possible to the actual UX.
Comfort is not the only aspect of UX, of course. Whatever you create, you want to make it understandable, learnable, memorable, consistent, accessible and safe.
Itâs nice if it looks good, too...
UX != Comfort: Introduction to Accessibility
As stated before, building a good user interface is challenging. Letâs say youâre working on an app, site, service or whatever and you want to use the help of a framework. There are many UI frameworks and templates on the web, so you wonât have a hard time finding one for you. Might take some care to find the right one for your users.
Accessibility (a11y in short) is one of the most important aspects of UX. 10-20% of the worldâs population has one or more disabilities. According to this summary, 7% of UK, US and Canadian web users have dexterity difficulties; 8% of them have some kinds of color blindness; and 3-4% of them canât see well enough to read, which is increasing over time. People often state a11y as something for users with special needs, but donât we all have our own âspecialâ custom preferences? We organize our worktable to reach everything easily, we group our apps on our iPhones in a specific order, we turn on dark mode to have a better reading experience and a lover power consumption... A11y is not so different and a lot of mobile accessibility considerations are actually pretty simple: minimize the information to fit small screens; use a clear wording especially on actionable items; provide a reasonable touch target size and spacing; place controllers to where itâs easy to access; use the right background-foreground contrast (there are tools like this one to help you with it); donât rely on colors only: using green, yellow, and red dots to give status feedback might be a simple and clear idea for you, but for someone they are just shades of grey (hereâs a cool browser extension to help you see what others see); gestures should be as simple as possible and itâs good if you can add a work-around feature to simulate them with on-screen menus or even keyboard operations as more and more mobile devices support keyboards, as well.
Fortunately, iOS has a great a11y support, and I can very much recommend this article about SwiftUI accessibility, as well. Long story short: by adopting SwiftUI youâll be on the right path to give an accessible UI for all your iOS users (not regardless of the design, of course). UIKit is not without a11y options either, but Iâll keep the technical part for Tib. đ
There are many more principles but the ones listed below are a good start. You can apply them on web applications, as you need to make them mobile-ready anyway. But even if you took care of it all, you can still get it wrong. Let me show you an example.
The Power of Visual Design
Letâs say youâre on a webpage with a list of âinfiniteâ elements loading to scroll (like a newsfeed). Thereâs a fixed footer on the bottom of the page, containing some persistent and dynamic (hidden) actions. You can select items from your page and âdelete allâ by a bulk action button appears in the footer. Easy right? đ
Now letâs say you cannot use touch or mouse, only a physical keyboard. You press tab to navigate, jumping from one UI element to another, but your list is just loading more and more data, so you cannot reach the footer, which means you cannot reach your actions. Itâs easy to fix, of course, you just replace the load-to-scroll option with a âload moreâ button, so you can focus it and jump to the footer without loading more items. But if you miss it, you can potentially prevent some of your users from performing an action.
Letâs see this example from another perspective. You select the items you want to remove and the âdelete allâ button appears, you deselect them and it disappears, so you can connect the dots. But what if you donât see this visual feedback? What if only the screen-reader tells you the âdelete allâ button is in focus? Would you know itâs only for the selected items or would you expect it to purge all your data? As you can see, the copy you use matters, too. While you see âdelete allâ is connected to the selected items, âdelete selectedâ will be clear for those who can rely only on their ears, as well. While a basic UI can be good for most of your users, an accessible UI is better for everyone. So donât forget to take care of it.
Designing the UI before coding can help you to cover these cases so you donât have to waste your time implementing multiple versions of a faulty UI. The most popular frameworks have component libraries for design tools like Sketch or Figma so you wonât have a hard time matching your code to your design. Larger companies focus a lot on maintaining and documenting their own custom frameworks and UI libraries (altogether: design systems) to have a faster workflow and a more consistent UI fulfilling all UX requirements. But Iâll keep this one for a future post. đ
UX Beyond UI
Weâve talked about the âtouch and feelâ of our tools, now letâs have a look behind the curtain. The best UX is invisible, they say and I dare to say we all prefer simplicity over beauty or fun, at least when weâre about to perform a task. It doesnât matter how cool your UI is, if the service is bad, or doesnât give the user what they want. But if the tool you provide does itâs job well, and helps the user to get things done effectively, they might not care much about the outlook of your interface (remember swapping iOS6 to iOS7 đ).
Simplicity on the UI means complexity in the background, though. Just think about search engines: itâs a really simple UX, you just type stuff to the search field (or even to your browserâs URL bar), and things magically appear on your screen. Here you donât care about beauty, or fun animations or anything, what you care about is speed and accuracy: you want to find something and you want it now.
We all know how frustrating is it to see the loading animation for more than⊠like 3 seconds. Actually, there are studies saying users will abandon your site if the loading time is more than 3 seconds, which can be alarming. Itâs without saying that a visual designer cannot do much about that. Itâs one of the many cases when UX highly depends on the effort of developers, and itâs a great responsibility! We all want to get our jobs done easily, but sometimes choosing the short path means our users will have to walk the longer one. I know there are many factors (deadlines, legacy code, dependencies and so on) during a project tying our hands, but if you have the chance to give a solution to a problem, donât hesitate to do so just because thereâs an easier way. Your users will thank you later. đ
Well, thank you if you made it to this point! I hope you enjoyed this sneak-peek of UX, let me know if youâd like to read more, Iâm happy to share what I know. đ€