In this popular meme as above, UI and UX comparison is clearly explained. The original ketchup bottle is UI (user interface), which is just normal glass bottle, iconic, not bad.
And then we got a evolved version in the middle, upside-down bottle, obvious a better user experience that the ketchup won't be stuck in the bottle. This bottle with new UI gives us a better UX(user experience). Yes, this is a great example to illustrate UX, which pays more attention to user experience and usage situation.
If we see the product as a human body, then the skin represents UI in charge of its appearance, its feel and reactions. The organs represent UX, working as functional parts for supporting your life. Bones represent code, forming human body structure. ux-vs-ui-dev-skills-expanded.png 72.56 KB
From this picture, it's easy to see UI and UX are two vastly different roles but at the same time their job got something in common. Both jobs are required to engage in interaction design.
User interface design cares for if the function works or not. User experience design not only cares for it's function but the users' emotion, how the users feel about when their interaction to UI. Bi9ItWiCcAArpXg1.png 156.08 KB
UI makes sure the website or app is properly laid out while user experience focuses on how users interact with your product, in a overall perspective and more interactive way. UX covers lots of things from site map to architecture of the content. A good user experience won't stop at a beautiful UI but expands to solve users' problems by working out a consistent user journey ,connecting online and offline behaviors seamlessly for potential users.
UX take cares of personas, user stories, user research and usability testing while UI handles layout, visual design and branding. Both UX and UI designer should work together on building a wireframe.
From this diagram we see interface is merely part of the experience (UX > UI). User experience designer has the responsibility of taking care of all these elements including content, information architecture, industrial design, etc. However UX designer doesn't have to be a master of one, must give an overall consideration on product based on the principle of usability with the help of analyst, researcher and UI designer.
UX designer follows "human centered design" approach , develops task flows and scenarios for the best possible user experience while UI designer specializes in colors and typography in a creative thinking way. What UX and UI designer have in common is both of them wear big beard.
UI designer focuses on the color of the button while UX designer pay more attention to users' feeling, how they feel when interacting with the product.
As the design thinking process as a whole is getting more and more attention lately, it is not detail that matters but the process how it is designed. Whether UI or UX, the final goal is the same——creating the best possible product experience. dt-copy-xfcrbh.jpg 279.06 KB
Design thinking is anideology based on anuser-centric approach. It comprises 5 phases,including 5 phases including empathize, define, ideate, prototype, test. Prototype is one of the most important part of them.
A nearly real prototype don’t have to be perfect and it's fairly enough as long as it can be used to simulate scenarios and then get the real test result from it. Create a clickable prototype and mockup that your users can understand and interact with, then test whether or not the flow of the product is smooth and consistent. If not, just find a problem and make a modification.
MockingBot, different from comprehensive Axure, it's intuitive to use , just drag and drop, WYSISWYG. It enables you to structure the interactions with visible links that are pulls and connect the pages. You can make your own app prototype within 10 minutes.
