You-X You-I
An interactive guide on the basics of user experience and user interface design.
Define the problem and establish goals
Design and develop solutions and test
Analyze information to redesign and improve
Use color sparingly. Create a palette of primary colors, secondary colors as well as accent colors. Associate colors with certain elements such as primary actions, secondary actions, link colors, active states, etc. Keep them consistent throughout your design so your users can familiarize themselves with the purpose of each color.
Just like color, typography is best used with moderation. Too many typefaces look messy and can be confusing. Try to stick with one or two styles that work well together. Establish a comfortable scale sizing that serves a purpose.
ABCDEFGHIJKLMN
OPQRSTUVWXYZ
1234567890
abcdefghijklmn
opqrstuvwxyz
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu tellus scelerisque, finibus tellus quis, cursus magna. Integer ac imperdiet urna.
Users don't read the web; instead they scan the page picking out individual words and images. Users want to be able to skim through the vast amount of content effortlessly and quickly. Draw an obvious point of focus with the use of images, colors, keywords and or typographic hierarchy.
Pictures grab people's attention faster and can translate ideas much more efficiently than words. A great picture can drastically improve your design.
Use hierarchy to break content into small parts. A large header with smaller content chunks can be easily read and provides users a piece of information on the subject.
In western cultures we read left to right, so the content on the left is what users usually see first. When grouping elements take into account the space it occupies. Add just enough space between elements so that they are clearly separated, but not too much so that they show they are still in relation to one another in a set.
It's crucial that users can navigate your website or app quickly and easily. Make them feel comfortable by showing their current location as well as simple ways to move around. Make sure things such as labels and icons represent where they are about to proceed.
Don't make me feel lost, I don’t like feeling lost.
I appreciate that you highlight my current location.
It's really helpful that I can jump from one location to another quickly.
Thanks for keeping it simple and easy for me.
Provide the users immediate feedback. Whether it's indicating specific notifications or a beautiful animation that keeps them entertained while things load. It's comforting to know what's happening at each moment of interaction.
Please wait, Syncing Device.
The human computer interaction principle of Hick's law states that the time it takes to make a decision increases with the number and complexity of choices. As the decision time increases, the user experience suffers. Don't overwhelm the user; make it so they have digestible sets of choices.
Fitts's law predicts that the time required to rapidly move to a target area is a function of the distance to and the size of the target. Make targets easy for users by making them a comfortable size as well as grouping them together based on their purpose.
00:00
00:00
You-X You-I was created by Ken Fernando. He is a UX / UI engineer located in the Greater New York City Area. You can contact him below, or go to his personal website at KenFernando.com
The purpose of this page is to take basic UX UI principles and build understanding through a visual experience and interactions.
