Fire-and-Forget
Augmented Reality is the next big thing. You should prioritize innovation over feature completeness. Probably those are the two most important UX sentences of the last two weeks. Please read the article if you want to catch all the UX lessons I’ve learned from Pokémon Go. Comment if I missed something.
Text links inside the main text body (<article> element) of a website should get underlined when the user hovers the mouse over them. They should have a distinctive blue color that fits the design of the site. Pick #1e0fbe blue in case you can’t decide. Here is the CSS for you:
article a{text-decoration:none; color:#1e0fbe}
article a:hover{text-decoration:underline}
Click to continue…
If you want the easiest to click buttons (lowest difficulty index), place them fixed, on the center of left edge of the browser window: position: fixed; (this CSS rule will make the button stay where you set it to be, even after scrolling, regardless of the content), and set left: 0px; top: 50%;. If you want a convenient place, that is non-invasive, and still easy to use, put the buttons right after the article/blog post, before the comments. In both cases make sure the buttons are large enough to be easily clickable, even on touch devices, but not too large so they become distracting or annoying. 32×32px is the minimum I would use if targeting screens with resolution no larger than 1920×1200px.
Click to continue…
To make sure larger blocks of text are readable on the web and across all devices you need to go with a fairly large (16px will do) base font size, 1.5em line height (proven to increase readability), 1.125em paragraph margin-bottom (will make the text easier to scan). Even quicker win is to copy-paste this into your main CSS file, right after the CSS reset:
p {font-size: 16px;line-height: 1.5em;margin-bottom: 1.125em;}
Click to continue…
To make sure larger blocks of text are readable across all devices you need to pick a “proven to be readable” font-family like Helvetica, and add Arial, sans-serif as a fall-back. Even quicker win is to copy-paste this into your main CSS file, right after the CSS reset:
body {font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;}
Click to continue…