Leyla Bonilla's List: Diseño web

• The content is the same on both designs, as are the other elements, such as photography. Yet the two designs stand at opposite ends of the brand spectrum. Less whitespace = cheap; more whitespace = luxury.

• Have you ever had that sinking feeling when you realize—just a split second too late—that you shouldn’t have clicked “Okay” in the “Are you sure you want to quit?” dialog?
• It’s not your fault: it’s your software’s fault.
• Why? Because software should “know” that we form habits. Software should know that after clicking “Okay” countless times in response to the question, we’ll probably click “Okay” this time too, even if we don’t mean to.
• What about making the warning impossible to ignore? If it’s habituation on the human side that is causing the problem, why not design the interface such that we cannot form a habit. That way we’ll always be forced to stop and think before answering the question, so we’ll always choose the answer we mean. That’ll solve the problem, right?

• This type of thinking is not new: It’s the type-the-nth-word-of-this-sentence-to-continue approach. In the game Guild Wars, for example, deleting a character requires first clicking a “delete” button and then typing the name of the character as confirmation. Unfortunately, it doesn’t always work. In particular:

     
   
  1. It causes us to concentrate on the unhabitual-task at hand and not on whether we want to be throwing away our work. Thus, the impossible-to-ignore warning is little better than a normal warning: We end up losing our work either way. This (losing our work) is the worst software sin possible.
• It is remarkably annoying, and because it always requires our attention, it necessarily distracts us from our work (which is the second worst software sin).
• It is always slower and more work-intensive than a standard warning. Thus, it commits the third worst sin—requiring more work from us than is necessary.
• In the Guild Wars example, points two and three aren’t particularly apropos because deleting a character is an infrequent action. However, if we had to type the name of a document before being allowed to exit it without saving, we would find it very burdensome.
• Whenever we have the opportunity to throw away work, the computer must allow us to undo our actions.
• This leads to one of the most basic and important mantras of interface design: Never use a warning when you mean undo.

8 more annotations...

• On a website, “navigation” doesn’t mean just links. Navigation is, like most elements of a website, about communicating with the user. Good navigation tells a story, and good stories have a beginning, middle, and end.

• Any good global navigation scheme should, at a glance, answer the top three questions every user has at the back of their mind on any page:

    
   
  1. Where am I? (Present)
   
  2. Where can I go? (Future)
   
  3. Where have I been? (Past)
• One: Never, ever link to the page you’re on
• When the user mouses over a link and that trusty pointer hand appears, that says: “This is a place you can go. Click me to go there now.”
• When the user clicks, their expectation is that click will make something happen or take them to a new place. If that does not happen, that’s a bad experience and the user is filled with doubt and uncertainty. Your site’s trustworthiness just went down a notch.
• The one possible exception to this guideline is anchor links. As you know, anchor links don’t send the user to a new page, merely a new part of the page they’re on already.

• Two: Show where you are

    

  Like the first guideline, this is just about giving the user a big “You Are Here” clue, wherever they are. If the navigation quietly reminds the user where they are, they’ll never have that “Am I Lost?” panic moment.

• Three: Think before you link

    

  If you were considering nominating me for Captain Obvious after the last two guidelines, you’re gonna love this one. Just think about every link in your global navigation. Ask yourself, “Will users really need this link every single time they visit?”

• Putting it all together

    

  Here’s an example of what all this looks like in practice.

7 more annotations...

• 1. Size

   

  Larger font size indicate higher priority because it draws reader’s attention, therefore this method is commonly applied on headings.
• Generally, to create a contrast between the headings and the body text, we use serif font for the headings and sans-serif font for the body, or vice versa.

• If you want to go beyond the web safe fonts, there are two more options:

   
   
  1.  

     CSS image replacement, that is to use CSS to hide the text and replace with a background image.

• Color

   

  Color contrast is a common way to distinguish between navigation, headings, link, and body text.
• Sometime you don’t need to make something bigger to get more attention, you can create emphasis by using brighter color, such as red.

• Cases

   

  When the same typeface is used for the headings and body text, contrast can be established by changing the case. Uppercase tends to get more attention than lowercase, therefore it is more suitable for headings. The CSS property to transform text to uppercase is text-transform: uppercase.
• Tips: avoid using uppercase in the body text or in long sentence because it will reduce readability.

• Style and Decoration

   

  One of the common mistakes made by most editors (particularly the Microsoft Word users), is the tendency to use the underline decoration to emphasize certain text. This is a big mistake in web typography. Readers will misinterpret the underlined text as a link because the browser underlines the link by default.
• Another common mistake is that people tend to bold the entire line of text. By doing so, the emphasis/contrast of the text is lost.
• • Block break (padding or margin) is the space in between the block elements.
   
  • Paragraph break (padding or margin) is the space created after the <p> element.
   
  • Tracking (letter-spacing) is the space in between the characters.
   
  • Leading (line-height) is the space in between the lines.
   
  • Indentation (padding or margin) is commonly used for blockquote and list elements.

8 more annotations...

• Contrast
   Elements that aren’t the same should be very different so they stand out, making them “slightly different” confuses the user into seeing a relation that doesn’t exist.
• Repetition
   Repeat styles down the page for a cohesive fee
• Alignment
   Everything on the page needs to be visually connected to something else
• Proximity
   Proximity creates related meaning: elements that are related should be grouped together, whereas separate design elements should have enough space in between to communicate they are different.
• Contrasting elements allow for the user to figure out which page areas are related and which are totally separate, so make sure to differentiate your elements and page sections.
• Either left-align, or right-align text, but don’t do both. Right-aligned text in a right sidebar creates rivers of white space between the two columns and looks awful. If you left-align your body copy, then left-align your sidebar text as well.
• Centered headlines are classy, centered body copy isn’t
• Use existing hard edges to line up other elements. If your header graphic is 5px from the left edge, then have your body copy be 5px from the left as well. Be precise: 5px is not 7px — good design is all about the details.

6 more annotations...

• A simple example of precedence is that in most sites, the first thing you see is the logo. This is often because it’s large and set at what has been shown in studies to be the first place people look (the top left).

• To achieve precedence you have many tools at your disposal:

   
   
  • Position — Where something is on a page clearly influences in what order the user sees it.
   
  • Color — Using bold and subtle colors is a simple way to tell your user where to look.
   
  • Contrast — Being different makes things stand out, while being the same makes them secondary.
   
  • Size — Big takes precedence over little (unless everything is big, in which case little might stand out thanks to Contrast)
   
  • Design Elements — if there is a gigantic arrow pointing at something, guess where the user will look?
• Line Spacing
    When you lay text out, the space between the lines directly affects how readable it appears. Too little space makes it easy for your eye to spill over from one line to the next, too much space means that when you finish one line of text and go to the next your eye can get lost. So you need to find a happy medium. You can control line spacing in CSS with the 'line-height' selector.
• Padding
    Generally speaking text should never touch other elements. Images, for example, should not be touching text, neither should borders or tables.   Padding is the space between elements and text. The simple rule here is that you should always have space there
• White Space
    First of all, white space doesn't need to be white. The term simply refers to empty space on a page (or negative space as it's sometimes called). White space is used to give balance, proportion and contrast to a page
• Navigation — Where can you go?
   There are a few commonsense rules to remember here. Buttons to travel around a site should be easy to find - towards the top of the page and easy to identify. They should look like navigation buttons and be well described. The text of a button should be pretty clear as to where it's taking you.
• Orientation — Where are you now?
• Can it actually be done?
    You might have picked an amazing font for your body copy, but is it actually a standard HTML font? You might have a design that looks beautiful but is 1100px wide and will result in a horizontal scroller for the majority of users. It's important to know what can and can't be done, which is why I believe all Web designers should also build sites, at least sometimes.
• What happens when a screen is resizes?
    Do you need repeating backgrounds? How will they work? Is the design centered or left-aligned?
• Are you doing anything that is technically difficult?
    Even with CSS positioning, some things like vertical alignment are still a bit painful and sometimes best avoided.
• Could small changes in your design greatly simplify how you build it?
    Sometimes moving an object around in a design can make a big difference in how you have to code your CSS later. In particular, when elements of a design cross over each other, it adds a little complexity to the build. So if your design has, say three elements and each element is completely separate from each other, it would be really easy to build. On the other hand if all three overlap each other, it might still be easy, but will probably be a bit more complicated. You should find a balance between what looks good and small changes that can simplify your build.
• For large sites, particularly, can you simplify things?
    There was a time when I used to make image buttons for my sites. So if there was a download button, for example, I would make a little download image. In the last year or so, I've switched to using CSS to make my buttons and have never looked back. Sure, it means my buttons don't always have the flexibility I might wish for, but the savings in build time from not having to make dozens of little button images are huge.
• Font Choices — Different types of fonts say different things about a design. Some look modern, some look retro. Make sure you are using the right tool for the job.
• Font sizes —Years ago it was trendy to have really small text. Happily, these days people have started to realize that text is meant to be read, not just looked at.
• Spacing — As discussed above, spacing between lines and away from other objects is important to consider. You should also be thinking about spacing between letters, though on the Web this is of less importance, as you don't have that much control.
• Line Length — There is no hard and fast rule, but generally your lines of text shouldn't be too long. The longer they are, the harder they are to read.
• Color
• Paragraphing
• justified text tends to create weird gaps between words where they have been auto-spaced. This isn't nice for your eye when reading, so stick to left-aligned
• Adhering to Standards
    There are certain things people expect, and not giving them causes confusion. For example, if text has an underline, you expect it to be a link. Doing otherwise is not good usability practice
• Think about user tasks
    When a user comes to your site what are they actually trying to do? List out the different types of tasks people might do on a site, how they will achieve them, and how easy you want to make it for them. This might mean having really common tasks on your homepage (e.g. 'start shopping', 'learn about what we do,' etc.) or it might mean ensuring something like having a search box always easily accessible.
• You may also wish to base your designs on a specific grid.
• • Keep shape edges snapped to pixels. This might involve manually cleaning up shapes, lines, and boxes if you're creating them in Photoshop.
   
  • Make sure any text is created using the appropriate anti-aliasing setting. I use 'Sharp' a lot.
   
  • Ensuring that contrast is high so that borders are clearly defined.
   
  • Over-emphasizing borders just slightly to exaggerate the contrast.

• Consistency

   

  Consistency means making everything match. Heading sizes, font choices, coloring, button styles, spacing, design elements, illustration styles, photo choices, etc. Everything should be themed to make your design coherent between pages and on the same page.

22 more annotations...

• • Breve descripción de los contenidos de la página, su título principal, etc.
   
  • Finalidad que persigo al hacerla (informar, hacer negocio, entretener, etc.)
   
  • Páginas parecidas a la mía, qué puedo ofrecer yo que no tengan ellas para atraer a mi público objetivo, etc.
   
  • Hardware, software, documentación que necesito para realizarla y de qué dispongo realmente.
• Es conveniente que dibujemos un organigrama con todas las partes del sitio web, distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos multimedia que se consideren pertinentes, mediante el cual ir creando la estructura de la página we
• En árbol: Esta estructura está compuesta por una página principal que enlaza con otras páginas, las cuales, a su vez, enlazan con otras páginas de nivel inferior. De esta manera se agrupan las páginas web en niveles, de tal modo que para llegar del primero al último se debe pasar por todos los intermedios. Esta estructura es poco navegable si tenemos una web con muchas páginas, porque para ver las páginas de otra rama tenemos que retroceder hasta la página principal, haciendo la navegación muy pesada.
• En lista: Esta estructura es la opuesta a la anterior. En ella no existe página principal ya que todas están en el mismo nivel. Para llegar a la última página hay que recorrer todas las anteriores. Es una estructuración muy adecuada para la presentación de manuales o aplicaciones donde el usuario deba recorrer forzosamente una serie de páginas web para conseguir su objetivo.
• Mixta: Esta estructura es una combinación de las dos anteriores. Las páginas están jerarquizadas en niveles, los cuales a su vez están conectados entre sí en forma de lista.

3 more annotations...

• Personal search engine Lijit does a great job of making it easy to associate your account with them with all kinds of other accounts you own around the web. It's simple: they just ask what your most common username is and then they check for public profiles with that username on a long list of different services. In just moments, with a handful of keystrokes, all kinds of info about you can be gathered together.
• Social recommendation service (and, disclosure, RWW sponsor) Strands, for example, presents customers of Spanish bank BBVA with messages like the following: "Grocery spending: A married person spends 103% more on groceries than a single person. By the way, are you married or single?" That's interesting to know and would motivate me to answer the question with a click.
• if Twello (or another app) said something like this to users: "We see that you are an accountant - did you know that Twitter users who are accountants tend to post more photos to Flickr than Doctors do, but fewer than people in Defense related fields do? If you'd like to tell us what your Flickr username is, we'll connect it to your Twitter account here."
• Messages like the following greet users when they login to their Brighter Planet account: "You live with one other person and you use 15% green electricity. Improve your profile by telling us about the car you drive and your flights."
• Brand spanking new social news site SocialMedian assigns a big picture of a famous (or infamous) person as each new user's avatar. My default profile was graced with a photo of Bill Gates, but other people start out with George Bush - something that must get a lot of new users to click the "change my photo" link. It's a witty idea and we wonder just how far it could be taken.
• "You are 15 years old, clean up after circus animals for a living and love Britney Spears videos on TV. (unverified - not true? click here to edit your profile.)" Oh yeah, that could work.
• Why not let users of your app opt-in to populate their profiles with publicly available profiles from other accounts?

5 more annotations...

• “the shiny surface wins awards, real substance wins customers”
• Nevermind what design you have, and nevermind which functionality you have to offer — if your visitors don’t understand how they can get from point A to point B they won’t use your site.

• In almost every professional design (except from special design showcases such as, e.g., portfolios) you need to offer your visitors

   
   
  • a clear, self-explanatory navigation,
   
  • precise text-presentation,
   
  • search functionality and
   
  • visible and thought-out site structure.
• Hidden log-in link.
• Pop-ups for content presentation.
• Almost every modern web browser uses a popup-blocker to prevent pop-ups, ad blocks and further site content recognized as advertisement. Firefox, Safari, Opera and Internet Explorer make use of it — therefore the idea to use pop-ups to present the main content isn’t probably the most reasonable idea web-designer might come up with.

• Invisible links.

   

  Visitors have to know where they are, where they’ve been and where they can go next. If designers don’t present this information in an appropriate way, visitors can have serious problems with site navigation.
• Visual noise.
• Content blocks layering upon each other.
• You don’t use pop-ups.
   Pop-ups interrupt the browsing session of the visitors and require an instant feedback. Respect your visitors.
• You don’t change users’ window size.
   The same argument as the one against pop-ups holds. Some browsers, e.g. Internet Explorer, saves the browser dimensions and uses them for further browser sessions.
• You don’t use too small font sizes.
   Long passages are harder to read, and to read brief sentences readers need more time. It holds also for links, buttons, forms, search boxes and other elements. Good news — in Web 2.0 the opposite is the case.
• You don’t have unclear link text.
   Links have to be precise and lead to the destination they describe. Ambiguous link descriptions should be avoided.
• You make it easy to contact you.
• Your links open in the same window.
   Visitors want to have control over everything what happens in their browser. If they’d like to open a link in a new window they will. If they don’t want to, they won’t. If your links open in a new window you make the decision which is not your decision to make.

13 more annotations...