As a developer, I like to point out that I’m not a designer. Thinking about the look and feel of the apps (either web, desktop or mobile) I code had always been the less interesting point for me. Funny thing is that, because I’m a woman, coworkers would often think I’ll be the one to make the design better. The aesthetic of the app had always been my last concern. Don’t get me wrong, I was actually trying to make something OK in terms of UI, but I had never dug any further. I recently understood the reasons, and made a step forward to design better UIs and put some effort in the UX.
I hate CSS (says every back-end developer)
Let’s face it: CSS is not easy. If you compare to how easy it is to learn and use HTML, CSS is really tough. I think most of us just assume that CSS shouldn’t take us too much time and therefore never actually take the time to learn it properly.
I’ve recently changed my mind and my way of tackling CSS. CSS is a language by itself, that’s worth learning as much as any other one that can be useful in your development stack.
CSS might seem a bit random and untamable, but the good news is it’s just a series of grammar, vocabulary and hierarchy rules, as in any other coding language. So you can learn it, you can become better at it, you can master it. When you see it that way, it’s becoming more interesting.
You can look for good, comprehensive only courses on the web, train on CSS Battle (not tested yet), or challenge yourself just by designing your app on paper and realize your exact idea with HTML and CSS until you get to the desired result. I also totally recommend the e-zine “Hell yes CSS!” that’s teaching in a really visual manner and covers a lot.
I wrote this zine because, for most of the last 15 years, I found CSS confusing and upsetting (not “hell yes!” at all!). Even CSS changes that I felt like should be “simple” would take forever, and I was often just changing random things and copying and pasting from Stack Overflow. At the end I usually didn’t understand exactly why my CSS code worked, and it wasn’t a good feeling.
Julia Evans, Hell yes CSS!
UI is not only a thing for designers
I would often think that my apps didn’t look terrific because I’m not a graphic designer, I can’t use tools like Photoshop and create beautiful pictures to decorate my website or my app. I was pretty wrong, because you can make a full mobile app without a single handmade picture. You would need icons, but icons library already exist. You can make textures with CSS. If you really need an image, you could find it on a stock share.
UI for a developer is about HTML and CSS, that’s something we can totally learn and implement, and there’s just enough possibilities with these two guys to design an app without graphic design skills.
UX/UI isn’t a swear word
UX has been all over the place for a few years now. At some point I finally thought that, maybe, it was worth having a look at it, and at least know what all the fuss is about. And I found out UX is really interesting (side note from the future: a few years later, although I’m still not a fan of implementing UI myself, I’m very much passionate about the whole UX process). Instead of seeing it like an unwanted task, I switched my mind to seeing it as a problem to solve. And you know what? Solving problems, finding and providing solutions, is one of the main reasons I love coding!
UX design is a really broad discipline that includes UI but also a lot more stuff, with the goal of providing efficient and useful solutions for the target (the end-user). It’s super interesting, especially for someone like me who used to work a lot with customers and had work experience in marketing before starting working in IT. I found a lot of connections between my background and previous experiences, and UX design problem solving.
At some point I accepted the idea that an application that wouldn’t be used by it’s target audience would be developed for nothing. It can be incredibly innovative, work flawlessly, if it doesn’t answer a need and is not usable by the end-users, it will all be for nothing. And I personally hate doing things for nothing, even when I’m paid for it.
So now that (I hope) I convinced you that UX/UI were not a drudgery but just one more aspect of software engineering, I’ll tell you how I put in practice some of the concepts I’ve learned about UX thanks to online courses and articles.
My case study: designing a user friendly mobile app
I had published a mobile app. It was nothing incredible but it allowed me to play with some new tools and take a little personal challenge, as I was starting my career in software development. A friend of mine gave some harsh comments about it on a UX/UI point of view. My perfectionist self was pretty upset. Especially because it wasn’t the first time someone was telling my app wasn’t sexy, while I was personally really content that it worked flawlessly and had no bugs (and no one was acknowledging it!).
You have to admit, as a back-end oriented developer, it’s always hard to hear so much criticism about the design while no one seems to be aware of the invisible work to make it work and work well. I guess this will be our burden until the last line of code we’ll write.
I used to say that I didn’t care about design, but I still don’t enjoy receiving criticism. In the end, it motivated me to put a big effort in the look & feel of the new app I was working on. So I started learning about UX/UI to improve, and more importantly, I implemented it as soon as I had the opportunity.
The important ideas about UX
Here are the notes I made while seeking information on UX, and what it meant for my project.
UI – UI is of course a big part of the UX design. It’s about the screens but also the material you use to interact with it (may be a mouse, keyboard, touch screen…), the commands that can be used to interact (human computer interactions)… For a mobile app, the most important part is to have mobile oriented actions (Angular does that already, and you can add Ionic if you want extra mobile functionalities. Gosh I love this framework!).
For the screens, I retained that:
- space much be well balanced, not too much empty spaces but not too much information on the screen,
- the colors and shapes must be recognizable: a button would usually be rectangle, the same color has to be used for the same category of information or action (that’s “consistency”),
- related items have to be close to each others, as well as not directly related items should be distanced; that’s why a lot of mobile apps would use delimited areas to gather a small batch of elements together.
- There’s a lot more, but I’ve only been through the basics so far, and those three rules already gave me quite a lot of ideas to work on my project.
User Research – As I said, UX is not only about design and look and feel. Your final product has to be USEFUL, that is able to fulfil a need. To achieve that, you’ll need to make interviews and/or think about Personas who could use your app. What’s their behavior, their concrete needs, their motivation? I you want to go to the market with your app, that’s a really important step.
Ease of use – Then the app has to be USABLE, otherwise even the greatest idea can be wasted. The user has to find information easily, the actions have to be clear, the labels and words have to be understandable at a glance, you should reduce the number of clicks to achieve regularly needed actions, work on the error catching and error messages clarity… This one is really important and the developer can really participate in the process at this point.
“Don’t reinvent the wheel”
Ok, if you’re a developer, you’ve heard that sentence a lot. I really like making things by myself and creating, I truly believe that this is part of the learning process, and that gives me more satisfaction than copy/pasting or using existing tools (that is, I want to code!). But I just came to the conclusion that, as UI is my weakest point in the development cycle, I should be humble enough to start by looking for what’s working well already, base my designs on it, and maybe later when I’m a Queen of UI I can do my own isht.
So I gathered visuals and ideas, by making searches on the Internet and by opening my favorite apps on my phone and analyzing the recurring graphical codes of mobile UI. I discovered the trends (“ok, rounded angles are a thing”, “ok, small groups of actions delimited”, “color palettes can be this way or that way…”, “ow I see, no one shows the title of the app after logging in”… but also “everybody’s doing purple so I don’t want purple #yourebel”). Then, up to me to decide what appeals to me, what I would do differently, trying to keep my end-user point-of-view here.
And… I played. I spent a lot of time choosing a color palette, but I guess that’s something you learn with the time (side note from the future: color palettes are still driving me nuts after more than 3 years of applications development, I guess we all have our boundaries)!
Then, up to my favorite front-end technology to offer (kinda) ready-to-use UI elements…
Angular, Material and CSS
So yes, I used my signature stack, a REST API made with Java/Spring Boot, and a front-end with Angular. I always use the Material UI library, they have a ton of elements, good documentation, great integration with Angular.
Still, for extra customization, I had to dig deeper.
Great that I had learned more about CSS. Now, I was about to discover that the Material elements have TONS of CSS handlers to play with to completely customize them. And I loved it. I simply used the inspector of Chrome browser, where you can see every single property of an element, the ones that are inherited, the ones that are overridden. Again, my “UI work” became a real “coding problem solving”, it was amazing (should I be worried about being so enthusiastic about code?).
Tadaaaaa
So here’s my app, before, during tests, and the final version. I haven’t let anyone test it (end-user) or criticize it (UX designer or dev) yet but I have to say I’m pretty happy already with the evolution. I’ve made a real work on CSS, I’ve used more Material elements than ever while in the beginning I was pretty reluctant to using third-party elements, and I think my app is really clear to understand. Now, I just have to hand it to my beta-tester for a first review and based of their comments, up to the next improvements!
A step further: I wrote my graduation work about it!
I was still attending evening classes to get my bachelor degree in business informatics while learning about UX design on my free time. I chose to study it, develop a project lead by its principles and write my graduation work about it, as a challenge. It was a great opportunity to learn a lot about UX (way more than the few ideas I shared in this post) and to play with Material and CSS on a real-life project.
If you have such an opportunity, I would totally recommend going out of your comfort zone and exploring a topic you’re not familiar with or you wish to learn. It’ll bring you a lot and will generally be praised by the people reviewing your work 🙌.
2 thoughts on “A journey towards better designed apps (UX/UI isn’t that painful after all)”