UX? UI? What this? How do?
Looking back at the designs I quickly bashed together yesterday; they definitely have to be worked on a lot more. The problem is, where do I start? Definitions could help.Â
All UI is a part of UX design, but not the other way around. I feel that that is a succinct way of summarizing the differences between the two, as they are related but deal with different areas of the user’s interaction; User experience looks at everything the user will interact with, directly or indirectly, Norman & Nielsen (1998). On the other hand, UI relates to the actual interface that the user will interact with, whether that be through images on a screen, audio, etc. And is part of the many aspects of UX. Interaction Design Foundation (n.d.) Another way of looking at it is that UX is how the product ends up “feeling” while the UI would be how the product ends up “looking”.Â
Both are important aspects of a product’s interactivity and affect how much the user will like and use the product. They can directly affect each other; hindering or elevating aspects of both. An example I would like to use is the difference between the User Interfaces of Pokemon Emerald and Pokemon Pearl, and each of them affected my opinion on each game.Â
Pokemon Emerald’s Battle UI | Carly Karas                      Â
Pokemon Pearl’s Battle UI | Carly KarasÂ
The topmost image is the interface of the older game, being simpler and providing less information compared to Pearl’s interface. The newer game’s UI on the other hand gives the user more information, is more visually pleasing while also adding touch support. The main problem with Pearl’s interface was the delay when using the traditional buttons to navigate it. A delay that wasn’t present when using the touch screen to make a selection nor was it present in the previous games.Â
Since I was a player of previous games, I didn’t use the new touchscreen features and used the buttons like the older games. The delay caused by this got in the way of one of the main activities in the game, battling. I use this as an example as it demonstrates how an aspect of a user interface may not affect the experience of one set of users, while affecting another set of users negatively at the same time. As such, the types of users expected to be using a product should be heavily considered during both the UI and UX design process.Â
Other things I looked into were Dieter Rams’ (1976) principles of design that I can keep in mind from a UX/UI point of view. Mainly how a good design:Â
makes a product understandable
is thorough to the last detail
While his other principles are also important, I think that these are the ones that will influence my design decisions the most. My goal as the UX/UI designer of this project is to make it so there is little stress added to the user by making the overall experience as easy and as painless as possible. One of the ways this can be achieved is by avoiding the pitfalls highlighted by Gray et al. (2018), which can infuriate and get in the way of the user.Â
These pitfalls; categorized as “Nagging, obstruction, sneaking, interface interference and forced action” are ways UI is used to control the actions of a user and generally leads to an overall poor user experience. This is something that we as a group should consider very carefully. For example “Nagging” is the repeated insistence that the user perform a potentially undesirable action, which may be difficult to stop. This section concerns one of our app’s planned features, a reminder that encourages people to call contacts that they haven’t interacted with in a while in order to help fight the feeling of isolation and loneliness. This could potentially become more damaging than helpful, as the user may have good reasons for not contacting that person and would introduce stress and anxiety instead.Â
A potential solution to this would be to allow the user to exclude certain contacts from this reminder feature. This could be exploited and made so the app doesn’t remind the user at all, which we would want to discourage. “Obstruction” is the term used by Grey et al. (2018), and is when the designers intentionally make it difficult for the user to access certain UI elements to perform an action. This again, adds frustration to the user and while we want the user to act a certain way it should not be through bullying the user into submission. This is where paying attention to Dieter Rams’ principles will become useful, as it will be a constant reminder of what we want the product to do and how we should achieve that. By paying careful attention to the overall experience and through user testing, these UX pitfalls can be avoided.Â
Of course all of this is fine in writing, however it becomes much more difficult if no clear user has been identified. The next time our group meets, this will probably be the most pressing topic. So far our audience is simply “people in quarantine/ self isolation”, which is practically everyone at this point. We should all look at this and decide who we are trying to cater to while also making up our minds on how exactly we want the app to perform its functions.Â
Interaction Design Foundation (n.d.) User Interface (UI). Design https://www.interaction-design.org/literature/topics/ui-design
Interaction Design Foundation (n.d.) User Experience (UX). Design https://www.interaction-design.org/literature/topics/ux-design
Norman, D., Nielsen, J. (1998) The Definition of User Experience (UX).  https://www.nngroup.com/articles/definition-user-experience/
Pokemon Emerald’s Battle UI & Pokemon Pearl’s Battle UI by Carly Karas Retrieved from https://medium.com/@carly.karas/pokemon-evolution-battle-ui-52def00c1cedÂ
Rams, D. (1976) Design by Vitsoe [Speech in New York] Retrieved from:Â https://www.vitsoe.com/files/assets/1000/17/VITSOE_Dieter_Rams_speech.pdf
Gray, C. M., Kou, Y., Battles, B., Hoggatt, J., & Toombs, A. L. (2018, April). The dark (patterns) side of UX design. In Proceedings of the 2018 CHI Conference on Human Factors in Computing Systems (pp. 1-14).