Status: Work in progress. Last update: June 24, 2015
Lesson 3: Never rely only on color or images!
Web pages shall be designed so that all the information conveyed with color is also available without it.
Bad use of color examples:
Mark required fields on a form with red color.
Refers to a button only by it’s color “Click on the green button to continue”
Include text content on an image
How to use color on text elements:
The default contrast ratio of text and background has to be at least 5:1
Large scale text can allow a contrast ratio of at least 3:1 (18 point text or 14 point bold text is judged to be large enough to require a lower contrast ratio).
Incidental text, (text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content) or logotypes has no minimum contrast requirement.
Status: Work in progress. Last update: June 18, 2015
Lesson 2: Navigation
Rule: A method shall be provide that permits the user to skip repetitive navigation links. Specially when navigation is repeated in all pages or included in a page template.
User goal: Navigate to relevant content.
Include a links that allow the user to skip over the navigation and go straight to the main content in the page.
These links can be visible or invisible for non-disable users.
Example: “Jump to main content” or “Skip navigation”
Use HTML Headings properly. Screen readers and some browsers allow users to move from heading to heading announcing the headings at the corresponding level (h1, h2, h3, h4, h5).
Some options of how to implement this:
Text link at the top (visible)
Text link positioned off the screen and move it in on focus
Use tiny image links (1x1px) of the same color of the background
Use text links of the same color of the background
Alert! Do not use display: none to hide navigation links. Screen readers respect display: none interpreting it to mean don’t display in any medium including speech.
TIPS: How to improve your navigation links (or any kind of links)
Choose wording on your links so the user can understand what the link will do.
Organize your content using true headings (h1, h2, h3, h4, h5) and lists.
Make sure content is well structure and clearly written. Check spelling, grammar and readability.
I’m currently student at the User Experience Design immersive program at General Assembly San Francisco. This is a full-time 10 weeks program to learn the basics and best practices of user experience design.
What I’m enjoying the most of the program is being with a group of people that is passion about design and so excited to learn that it’s impossible not to be engaged.
Time flies! We already completed 2 weeks in the program and we are already working on our second project. I’ll get to that later when it’s ready for sharing.
For my first project I worked on a mobile app that intends to reduce the food wasting at home by keeping track of the perishable food in your kitchen and their expiration dates. It also help users to discover delicious new recipes.
After a couple of interviews with users and defining the problem I wanted to solved. I started creating user flows and sketching the main screens of the app.
After some some drawings I was ready to build my first paper prototype. And I decided to make a video. Paper prototypes are fun to make. I think it’s a great resource, but it’s messy and it’s easy to lost track of changes. Anyway paper prototypes are very useful at the early stage of the design process to understand better the user flow.
Paper prototype video
After testing with paper prototypes, we moved to the screen using POP Prototyping on paper to create a tappable prototype. The biggest discovery on tappable prototypes it’s that even if you don’t test the app with any user, your sketches come to life and you can see the layout on the actual screen.