braindump of Tim Thomas on Web Usability on a Budget at HTML5.tx

Tim is speaking on procedures. There are usability principles that make software more friendly. ZenPen just has black copy on a white page. Focus on your users goals. At ZenPen all users need to do is type text into a text field. Don't empower users to have more powers than they need too. Use terms users will embrace. "Display Case" might be better than "Collection of Featured Items." GitHub only uses the color red for the Danger Zone. stripe is for ecommerce. The logo is in the top left which is a good convention. Horizontal subnav with links like your account go at far upperright. The search bar goes below it at the upperright. How long will it take you to find the search box if its not at the top right? Emphasize the important parts of your site and deemphasize stuff that is less important. This concept is called nudge. The word FREE or a different color from the rest of the page offers emphasis. If you've been staring at your monitor too much, try closing your eyes for five minutes and then looking at the screen? What is the first thing that comes to your eye? Utilize symbology and icons, this helps users accommodate to your website or application. Obviously you need to use icons that make sense. An arrow pointing left is the back icon, etc. Provide affordance. A doorknob visually suggests you may grab it. It feels good in the hand. Design in this way. Affordance is the appearance of capacity for "manipulativity." wireframe.cc is for wireframing. Show your wireframes to others and get their thoughts. Tim is a huge proponent of wireframing in general. fontello.com (like Font Awesome and including Font Awesome) allows you to select a font and download it to use in your application. dribble.com/tags/ux is a place to see UX ideas. creativemarket.com is a good place to go for buying UX stuff. It is a good go-to place for icons. uxdesign.smashingmagazine.com is fun. design-seeds.com has photo graphs for buttons. Buy coffee for others at a coffee shop and make users comment on your design. Font awesome injects symbols for HTML in i tags. @fontface syntax is used to server up an unsupported font. The browser will have to give out strange fonts.