In this guide, you will learn about some of the basic principles and key elements of UX (User Experience).
These are general guidelines for creating a positive user experience. The following guidelines are not listed in a chronological order of importance, as they are all equally important to create a smooth journey for the user. Some of these may apply more than others in certain circumstances and can be seen more as general, good practice.
This guide was initially created by YuurinBee (Formless Labs) and is subject to change. As the guide is open-source, anyone is welcome to contribute to make improvements that could be added, if the standard is met by the custodians. It is intended for general, public use and is licensed under the CC BY-SA 3.0 license. All parties are welcome to fork this repository to make changes and refine it to better fit your model.
In the planning stage, you are deciding the key objectives for the user and mentally mapping out what the journey looks like. Planning could also be seen as brainstorming, where you are beginning to come up with ideas that you would like to see implemented. What do you want the user to accomplish throughout this process? At this stage, ideas can be written down on paper or preferably stored somewhere that can easily be referenced. Consider storing ideas somewhere safe online that is accessible at anytime, around the world, and which multiple parties can view. This will prevent a potential point of failure in the future, if only the designer has all of the ideas on their computer or notepad.
Create the concept draft (often referred to as a wireframe), based off of the ideas you have gathered and consolidated in the planning stage. This can either be the first iteration or latest iteration you are looking to improve. In this stage, you are beginning to get a visual representation of the desired user journey. There are great programs available that allow for designers and teams to collaborate on UX wireframes, flowcharts, and more. One highly recommended program, which is free to use, is called Figma (web application for UX/UI design). The design stage can vary depending on many factors. It can include elements of user interface (UI) or be completely bare bones for backend and frontend developers to begin working on the functionality.
At this stage, the objective is to analyze what you have created. Look for point of failures, areas for improvement, and ways to generally enhance the user experience. At later parts of this guide, there are general bits of advice to follow that you can apply in this stage. Some aspects to consider and review to further analyze include simplicity, consistency, contrasting elements, user feedback, and more. Before the first iteration is released, it is not feasible to have user testing and feedback just yet. Though, once a minimum viable product (MVP) has been created and released, you are able to gather deeper market research data and user feedback to help see what areas need the most attention and improvement.
The fourth stage, Consense, is all about coming to an agreement or consensus with the latest implentations and changes. This stage will be addressed differently, based on the different structures of projects, teams, and organizations. It is a simple process, either approve or deny the suggestions in the previous stages. If denied, then make adjustments and changes until there is a consensus with necessary parties. When approved, then push the changes into production with Stage 5, Iteration.
This last stage is all about the execution of the proposed ideas and changes. The frontend and backend developers will make changes according to what was shared in previous stages. The goal in this part of the process is to make sure the changes implemented are fully functional. Anything being broken or partially working, will likely result in a pain point and ultimately harm the user experience.
The workflow and steps will always remain the same. After releasing an MVP or first iteration, Steps 2, 3, 4, and 5 can all be repeated in the same order. Every cycle that is completed should ideally be improving and enhancing the user experience, largely based on user feedback and market research data.
- Keep it simple. When creating an optimal user experience, less is more in a majority of cases. When providing the user with too many options, it can confuse the user and ultimately they may not get to the end of their journey, which negatively impacts both the user and the platform.
- Consistency is used to help users naturally retain the knowledge of their experience and build on it. If an account balance is always shown on the top right of the screen, the user will always know to reference the top right to see their balance. By moving the balance on the bottom left to the next page will only break consistency and ultimately make the experience less user-friendly.
- In order to define a clear path for an objective, it needs to blatantly stand out among the other options. Contrast is used in design to help bring attention to key objects and lessen the impact of lower priority objects.
- Know the audience(s), demographic(s), and user(s), so that the experience can be catered to their needs. Many designers and teams make the mistake of building what they think their users really want, rather than gathering market research data, user feedback, and building out the UX according to data-driven decisions. Running AB testing is a great way to gather user feedback for which model users respond the best to.
- Focus on the product being functional before trying to add additional features (bells and whistles) and make it aesthetically appealing. Functionality should always come first and then enhancing visual design can come second. For a car, you aren't focused on the interior or painting the body first, it needs its core pieces assembled and to be fully operational—view UX in a similar fashion.
- Key Objectives (KO) can be seen as the primary goal(s) you seek to accomplish and for the user to achieve.
What do you want the user to achieve through this design and journey?
Example: Key Objectives for a cryptocurrency exchange
- Create a safe means for users to deposit and withdraw funds.
- Create a safe and secure way for users to trade currencies.
- Call to Actions (CTA) are basically checkpoints throughout the user journey, encouraging the user to proceed in the manner which you have best designed for their needs. These are the main elements that you will use to help bring to the user's awareness, through powerful contrast, animation, and other methods. Consider CTAs like a bright, glowing neon sign saying "Click Here" or or a road sign that reads "Turn Right".
- View this technique as a "Yes" or "No" method. Pretend the user is progressing on a path and they arrive at a dead end that splits in two ways. Afterwards, they are prompted with a question "Do you want to turn left or right?". You don't want to provide too many unnecessary options that will ultimately end up confusing the user and not arriving at their end goal. Make it incredibly simple and direct. Do you want to continue or stop? If you want to continue, do you want to turn right or left? Binary paths will also help both backend and frontend developers to create clean and consolidated parameters for the system to operate efficiently.
- Provide real-time awareness or the "current state" for the user at every given moment. Give the user complete understanding of where they stand in the process. Did this desired command work? If not, they should be prompted with a box or notification sharing that their command has failed for whatever reason. Never leave it to the user to have to guess where they stand in the process. If they are waiting for something, give them a loading animation or progress bar to give them a clear understanding of their current state. This will prevent further confusion and all parties will be happier, creating a better user experience.
If you're interested in sharing feedback or contributing to this guide, feel free to create a pull request or comment with an issue.
- To discuss further, join the StakeCube Discord and tag @YuurinBee in #general-chat.