Your goal for the last half of the class is to create a fully responsive website and accessible website. This project can start from an existing project, for example an intensive project, or be built from scratch. It should meet the requirements:
- Mobile first design - You will plan this project using a mobile first methodology.
- Must create wire frames - You must create wire frames for your site.
- Must conduct UX text - You must conduct a User Experience test of your site. This is best done before you write any code. Yep, before you write code! Use your wire frames, paper prototypes, or use the prvious site if you are starting with an existing site.
- Must be responsive - Your site should scale and present itself well on mobile, tablets, and desktop. Stretch goal: take into account for tablet portrait, and extra wide desktops.
- Must be accessible - Follow the guide from the presious lesson and use the ideas to make your site accessible. Use the tools discussed to test and evaluate the accessibility of your site.
All of the things on this list are things that you should do when creating any website!
On mobile things stack vertically and there is less available space.
We view our phones most often in portrait and view port is taller than it is wide. We read horizontally and most of the information on the page is in text form. When you view a page on the phone all of the content is stacked vertically and you are scrolling vertically.
Most often on mobile content will maximize the width taking up as much horizontal space as possible, without overflowing, while stacking vertically with excess overflowing. In this way we read short lines and scroll for more content, with images showing as much detail as possible.
Pixels on mobile are generally smaller, or you could think about this as pixel density is higher, there are more pixles in a smaller area. This means that while the screens are crisp and look great everything on mobile is smaller.
The input experience on mobile devices is unique. All touch based. If you think about your finger as the cursor notice that it often covers thing that you are interacting with. There is no hover effect on mobile. The cursor on the desktop is 16 by 16 pixels, the tip of your finger takes up rough a 40 pixel circle. On mobile all interaction happens on a smaller screen with a much larger and less accurate pointing device!
On the desktop screens are larger. While we stack things vertically there is added space available to display things side by side.
Mobile first design is a design strategy that prioritizes the mobile user experience over the desktop experience. It involves designing for mobile devices first and then scaling up to larger screens. This approach is beneficial for ensuring that users can easily access and interact with content and features on their mobile devices. It also helps to create a consistent user experience across different devices and screen sizes, making it more intuitive and user-friendly. By prioritizing mobile design, businesses and organizations can offer a better user experience to their audience, leading to higher engagement and satisfaction.
User experience testing is essential for ensuring that a product or service meets the needs and expectations of its users. By gathering feedback from users, designers and developers can identify issues and areas for improvement that may not have been apparent otherwise. This helps to ensure that the product is user-friendly, efficient, and effective, which can ultimately lead to increased user satisfaction and loyalty. Additionally, user experience testing can help companies to differentiate themselves from their competitors by offering a better, more user-friendly experience. Overall, user experience testing is an important step in the design and development process, and can help to ensure the success of a product or service in the marketplace.
How do you conduct a user test? In a nutshell, you will present your project to your test subject who who will navigate the project while speaking out loud describing their experience.
If my project isn't finished how can I present it to my test subject? As the test provider you will show the "screens" of your project in whatever form they are in, as the test subject points to something on the "screen" you can show them the next screen or provide them with a visual feedback describing what would happen if the site had been functional.
What does the test subject do during a UX test? As a test subject your goal is to make make everything you are experiencing available to the test provider. The best way to do this is to think outloud, say anything that comes to mind while testing a site.
What does the test provider do during a UX test? The test provider should start the test by describing the background of the website. They should then provide goal for the test subject to accomplish on the website, without providing instruction on how to accomplish that goal. From here the test provider should not offer any other
Do people really do this? Yes! As a matter of fact is best practice, a job position, and respected and important part of software developement.
- Define your goals: Start by defining what you want to achieve from the user experience test. Determine what kind of feedback you are looking for, and what your main objectives are.
- Identify your users: Identify your target audience, and recruit users that represent your user base. Make sure that the users you recruit have the relevant experience and knowledge to provide valuable feedback.
- Set up the test: Prepare the materials you will need for the test, including the prototype or product to be tested, any instructions or tasks you want users to complete, and any materials for collecting feedback.
- Conduct the test: Sit down with your user and provide any necessary instructions. Ask them to perform tasks using your prototype or product and observe their behavior, listen to their feedback, and take notes.
- Collect feedback: After the test, collect feedback from the user on their experience. This could include their likes, dislikes, problems they encountered, and any suggestions they have for improvement.
- Analyze results: Analyze the feedback you collected and look for common themes or issues that emerged. Use this information to identify areas for improvement in your prototype or product.
- Iterate and improve: Use the feedback to make improvements to your prototype or product, and then repeat the user experience test to see if the changes you made have improved the user experience.