- Review of reading
- Partner Usability Study
Layout Project Feedback and Things To Avoid on the Final
- The layout project was all about developing an effective flexible layout, so I didn't care as much about typography or design (other than CRAP principles, which are always necessary!). The final project is to demonstrate your design AND development skills, so you'll want to spend some time coming up with an aesthetically pleasing site, in addition to code that validates.
- I saw a lot of people with a stylesheet for every photo page. If you are going to have styles for each page like this, then you don't need external stylesheets - they could all go in style tags in the HEAD. Because it's a multi-page website, you'll want to consolidate a lot of these to prevent duplication.
- Use conventions:
index.html for the entrypoint to a website.
- Avoid browser default fonts and colors - they make sites look incomplete.
- Always validate your HTML and CSS. This catches a lot of the little mistakes that will cause you to lose points. There's an HTML one and also a CSS one.
- Remember, alt tags on images aren't optional. Don't get sued.
- Run through each feature you make and ask yourself: do they follow each of the CRAP principles?
- Put thought into your typography and color palette. Remember our design lesson!
Usability Testing, Krug Takeaways
- Stop and read chapters 9-10 if you haven't already
- The only way to see if your site works is to watch other people use it
- Testing with one user is 100% better than testing with none. You'll always get some kind of feedback.
- Testing early and continuously is better than testing at the end. If you test at the end, then changes are hurried and can cause more issues.
- Traditional testing vs. DIY testing (see pg. 117)
Today's Partner Study
In a normal usability study (like we would have done in the classroom), you would have shared your site with your classmate and then watch them use it. This is difficult due to our current setup, so for today, you're going to zip your site and send it to your partner. Your partner will open it up and try to use it, while giving feedback in your team channel. The more feedback you give your partner, the more it'll help them.
What to do (based loosely on Krug, pg. 125)
This is just an example, so feel free to expand on this. Ask questions. Have a discussion! Talk like we've been social distancing for almost two months! While this is happening, the project owner should take notes so you can fix the issues.
- Send your projects to each other.
- The home page tour - what do you make of it? Where is your eye drawn to? What are your initial impressions? What do you think the site is about? Give any and all feedback that you can think of. Is there anything missing? What actions do you think you can take from the home page? What would you click on first?
- Navigation - try to access all of the features and pages. Do all of the photos load? Do you see contrast/repetition/alignment/proximity issues? Are you unsure of what a link or button does?
- Does it follow CRAP principles? Why or why not? How can it be improved?
- When you make the screen smaller - does it scale? Is it responsive and flexible?
- Does it look okay on different browsers?
- How are the images? Do they load? Are they oriented correctly? Are they blurry? Do they scale?
- The site owner: ask your partner to do specific tasks, such as submit a form, or find a piece of information.
Retrospective for Project Owner
- Make a list of the problems found.
- Order them from most egregious to less.
- Then, make a plan for how to fix each one.
- Post your plan in the channel.
Rest of Class
The rest of the class you are welcome to spend working on your projects and fixing issues that arise during your study. I'll be popping in and out of chats to ask questions or give feedback if needed.