You developer, unconsciously uses any part of the UX/UI Design

Danielle Teixeira
Blog do LFDev
Published in
7 min readJul 21, 2019

Perhaps you don’t know, but this part of design with User Experience and User Interface are also performed by us developers and requirements analyst.

I’m writing this is article show the dark spots about the design. But because in english? Why i’m want training a little. If do you want learn this article in portuguese, click here, please! =D

I’m not expert in designer, so talk about my experience with UX/UI and how use for developer. First pass, do you know UX/UI Design? Good, this subject can be confused sometimes. Do you ask me, why should I know? Because, the everything in the world connects, even if you don’t agree it now. Persons, streets, process, systems, everything!

UX Design or User Experience define for Donald Norman (ex UX design Apple) and Jakob Nielsen collaborated extensively for dissemination the design for user, or better, the Experience Design look at the message Norman’s.

“UX it’s not just app or systems, UX é everything and is arround you, it’s simple, the way you experience your life, experience the service or an app, systems and person! UX is more than you see.”

UI Design or User Interface, has the concept the part visual of the project, but the UI process the interaction between user and the middle of the interface graphic.

Differences between UX and UI

User Interface Design deal the interface the product, system, app interacts with the person of form clear and objective. One exemple of user interface is washing machine, when you catch the chothes for washing, do you interact the machine, select the type of clothes, if is delicate or jeans, edredom and others options. You choice the function based on your need. In other words, user interface is how user interact the product. Exemple of UI, tapping the screen for the update your acount, the interface is a intermediary or the bridge between the person and the objective .

Author: Dribbble

User Experience Design deal the experience user, think in user in his emotion in use the product, service, site, system and any other object that may be used by person for exemple. The focus the UX is the behavior the persons about use and more, aspects of usability, efficiency in performing tasks, system value and others. In other words, how does the user feel about doing the interaction.

It can be said that user interface and user experience walking together, one completes the other.

Author: Pinterest

Developers are heavily charged and need to change quickly

Author — Chatbot Rayban

Developers are heavily charged, but neither do they imagine they take on the role of ux / ui designers as well. Today we have many responsibilities, not enough developer front-end, developer back-end or full-stack, we need extend our skills and choise the better colors, fonts, size of widgets e study interface for devices (vision of UI Design). It’s the reality, on the other hand, we need study and search user experiencie. Who uses agile development methodology SCRUM, use canvas and create personas, wireframes, test usability, and etc. For exemple, for create the chatbots need study behavior, write about persona, wireframe and chatbot script for dialogue, it’s a UX design.

The importance UX/UI design on life the developers

UI/UX is very important, because provide systems and product more cohesive, the usability stay in first place. The technology is changing, developers and designers are closer, we need to absorved one piece of each area. Therefore, stay in contact with user experience and study their interactions. When you create the system, website or App, do you think in some requirements such as:

Give feedback users, response time fast and objective. Imagine you making bank operation and the function cash in the bank must be fast, everybody wait, inform the user what is going on.
Use the language of User, maybe redundant, but the users need the things, and way be writting, look at the buttons, What does the goal say?
Use branch, show the user where is he, use the branch for come back the screen or show exit easy of the system, if he want make, he can. It’s simple.

Exemple: the branch, you come back when you want to comeback— Credits: Medium

Consistency, in world multi-device use the consistency, keeping the system/app identity, the user must have same option on app and system. Ok, imagine you need use the service internet banking, compare the apps banking between internet banking and the bank terminal, the interfaces are very different and most of the time they lack options between the interfaces.
The clear example of consistency is Netflix, keeping the same options that exist in the app, web, tv or game console. If the developer not pay attention, all your job will be lost. It’s no use developer the best functions and design wonderful if you not keeping cohesion between the platforms of course neither top design will save you.

Exemple: Netflix

Write good messages, the user wait each time simple and objective message. Message of error for exemple is most be important, but when we are developing, have take care of the message without code. Will be clear and direct, more examples next.

Message error clear — Author credit
Message validation form — Author Credits
UX/UI together for send notifications — Author:Dribble

Complementary, one of the services that you should think when you developer is the complementary use of service in diferents platforms keeping interface and experience complementary for exemple Youtube with the interface control application with possibility of display on TV or even in video game.

Serviço do Youtube de forma complementar— Credits Author

Continuity, is aspect fundamental for devices. The continuity provides service interruption support, for example, when you stop reading the article in Medium whether it is in the application or the web, it provides that the service here is stopped, and when you access it, it restarts keeping the continuity where you left off . The same example it’s happens the watching stream with Netflix in any device (app/game/web/tv), whe you stop for any reason, the system automatically detected where you stop watching and start from where your stoped. This is feature fantastic because de user experience stay more fluid and powerfull.

How can I practicize UX/UI Design?

Say, UX UI Design is where you can not imagine it? But, how can you practicize ux/ui design? When you have base of software requirements gets closer user experience and user interface.
Before developing I ussually make a list of what to do:

  1. Briefing the product or service that develop: write the requirements (if you want How to write software requirements in a simple way, click here)and identify the personas (users proposal interface)and look which interfaces take with example.
  2. Architecture Information: with base on the riquirements, you make the sitemap, show how many pages you need developer, naming page and use the hierarchy. This is help you naming your classes and functions.
  3. Wireframe: I think the wireframe is the most know, this is part can test your idea, make prototype and align the elements and properties.
  4. Test usability: After draw wireframe it’s time of test usability your prototype, I know this is not responsability, but think the user experience and you can do before developer for ensure fewer errors. Test the interaction, give the prototype the other person for the test. Believe, you can make everything before develop.
  5. Develop: After prototype and tests, start the code.

These are steps I follow, it is my experience, how can I do it, works for me, but you have your way.

Conclusion

We underestand what are user interface and user experience and saw diffences between ux and ui with examples. Believe, do you use design for user interface or user experience more than you think . I would say that even more, UX/UI design is also part of the development, one complete the other. I hope that you enjoyed!

References

https://designculture.com.br/o-que-e-ui-design-e-ux-design

--

--

Danielle Teixeira
Blog do LFDev

Desenvolvedora Mobile , Pesquisadora em IoT e Machine Learning, Organizer GDG Lauro de Freitas e Embaixadora Women Techmakers