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 has 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. Once again, I don’t validate the cliché, the aesthetic of the app is my last concern. Don’t get me wrong, I was 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 guess most of us just assume that CSS shouldn’t take us too much time because that’s just part of the static front-end stuff. Meh.
I’ve recently changed my mind, and more precisely 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, untamable, but the good news is it’s just a series of grammar, vocabulary and hierarchy rules, as 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, that is 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, so that’s something we can do (and learn at first), 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 design has become to appear everywhere in the last few years. I think a lot of developers don’t see it as “there problem” or there responsibility, just similarly to what I said about CSS. It’s true if you’re working in a really big team with well defined roles. UX designer is a job by itself after all. It can even be split in several jobs as the discipline covers a really wide range of matters!
But if you work in smaller teams, if coworkers or the lead dev expect insights from everybody, or if you develop on your own, you can’t ignore UX design.
I finally opened to the idea 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. 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 problem (or better, 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, which make it really interesting. Especially for someone having changed career to start in IT, the previous background and experiences can really be useful in solving UX problems.
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’ve already published a mobile app. It’s nothing incredible I know, but it allowed me to play with some new tools and give me a little challenge. But recently, a friend of mine gave some harsh comments about it on a UX/UI point of view. The guy has 10 years experience in mobile app development with almost 50 published apps while I was just at my first shot. But still, my perfectionist self was pretty upset. In the end, it motivated me to put a big effort in the new app I was working on (still not a revolutionary idea but let’s say I’m building practice and knowledge for that day I’ll have the big idea).
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 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 get what appeals to me, what I would do otherwise, 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! Then, up to my favorite front-end technology to offer ready-to-use (kinda) 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!
The Code She Writes 