desenvolvimento para a web
DESCRIPTION
Designing for the webTRANSCRIPT
Desenvolvimento para a web
Porque está a Célia a dar a aula??Percebe alguma coisa disto?
http://pt.linkedin.com/in/cleocadio
Vive no MontijoMais de 10 anos de (paixão) experiência em Design & WebUsability & UI Design Consultant XHTML/CSS/JqueryFreelancerOpenSource
Do que é que vou falar hoje?
• Design• A importância da usabilidade e do design• O Processo de Design• Melhores Prácticas• As tendências• Dicas & Ferramentas
• Conteúdo• Estilo• Comportamento
As 3 camadas
HTML + CSS + JAVASCRIPT/PHP/ROR
• Partilha de Recursos• Rapidez• Acessibilidade• Manutenção• Compatibilidade• Flexibilidade• Longevidade
Vantagens
• Separar sempre o Conteúdo do design• Utilização de CMS sempre que possível• Tornar a manutenção fácil e descentralizada• O vosso site manter-se-á actual por mais
tempo• Usando as melhores prácticas com css,
estamos a usar standards que já foram testados e resultam com a passagem do tempo e da evolução dos novos browsers
Vantagens
O que é o Design?
Design envolve a busca de soluções que se ajustam ao utilizador, tarefa e contexto de utilização
Os objectos que são desenhados de forma adequada - incluindo software, ferramentas e sites web - ajustam o seu contexto tão bem que são fáceis de usar e uma mais valia para o utilizador
Uma disciplina que explora o diálogo entre os produtos, pessoas e contextos Um processo que define uma solução para ajudar as pessoas a atingir seus objectivos
12http://www.flickr.com/photos/habdelra/1234877976/
13http://www.flickr.com/photos/23098699@N05/3984955013/sizes/o/
14
15
User Interface Design
Os Designers precisam de equilibrar equilibrar uma variedade de considerações, incluindo as necessidades e objectivos dos utilizadores, as limitações impostas pelo contexto de uso e os desafios que surgem naturalmente da interacção entre humanos e máquinas, para conceber soluções
O processo de design é interactivo , o que significa que as soluções propostas são refinadas e melhoradas através de repetidos ciclos de avaliação do protótipo
Design Centrado no Utilizador
Usabilidade"[Usabilidade refere-se] na medida em que um produto
pode ser usado por utilizadores específicos para atingir metas especificas com eficácia, eficiência e satisfação num contexto de uso especificado". - ISO 9241-11 - ISO 9241-11
Usabilidade é uma abordagem para o desenvolvimentodo produto que incorpora o feedback do utilizador directoem todo o ciclo de desenvolvimento, a fim de reduzircustos e criar produtos e ferramentas que atendam àsnecessidades do utilizador
Usabilidade
Atingir a usabilidade através de Design de Interacção
• Produtos bem desenhados são mais fáceis de usar (e / ou aprender a usar) e são mais benéficos para o utilizador do que os mal desenhados
• Um bom design pode aumentar a produtividade, satisfação e aceitação do utilizador
Não me façam pensar!
Think of it this way:
When I’m looking at a page that doesn’t make me think, all the thought balloonsover my head say things like “OK, there’s the _____. And that’s a _____. And there’sthe thing that I want.”
[ 12 ]
chapter 1
NOT THINKING
...and theseare today’sspecial deals.
Memory,Modems...
There it is:Monitors.
Click
OK. This lookslike the product
categories...
Hummm, deixa cá ver....But when I’m looking at a page that makes me think, all the thought balloonsover my head have question marks in them.
When you’re creating a site, your job is to get rid of the question marks.
[ 13 ]
don’t make me think!
THINKING
Hmm. Prettybusy. Where
should I start?
Hmm. Why didthey call it
that?
Can I click onthat?
Is that thenavigation? Oris that it overthere?
Why did theyput that there?
Those two linksseem like they’rethe same thing.Are they really?
Hummm, deixa cá ver....
Things that make us thinkAll kinds of things on a Web page can make us stop and think unnecessarily. Takenames of things, for example. Typical culprits are cute or clever names, marketing-induced names, company-specific names, and unfamiliar technical names.
For instance, suppose a friend tells me that XYZ Corp is looking to hire someonewith my exact qualifications, so I head off to their Web site. As I scan the page forsomething to click, the name they’ve chosen for their job listings section makes a difference.
Note that these things are always on a continuum somewhere between “Obvious to everybody” and “Truly obscure,” and there are always tradeoffs involved.
For instance, “Jobs” may sound too undignified for XYZ Corp, or they may belocked into “Job-o-Rama” because of some complicated internal politics, orbecause that’s what it’s always been called in their company newsletter. My mainpoint is that the tradeoffs should usually be skewed further in the direction of“Obvious” than we care to think.
Another needless source of question marks over people’s heads is links andbuttons that aren’t obviously clickable. As a user, I should never have to devote amillisecond of thought to whether things are clickable—or not.
[ 14 ]
chapter 1
Hmm.[Milliseconds of thought]Jobs.Click
Hmm. Could be Jobs.But it sounds like more than that.Should I click or keep looking?
< OBVIOUS REQUIRES THOUGHT >
Jobs!Click
< Óbvio Pensar>>
Empregos Oportunidades de Trabalho Oportunidades
Hummm, deixa cá ver....
[ 16 ]
chapter 1
Another example: On most bookstore sites, before I search for a book I first haveto think about how I want to search.2
Granted, most of this “mental chatter” takes place in a fraction of a second, butyou can see that it’s a pretty noisy process. Even something as apparentlyinnocent as jazzing up a well-known name (from “Search” to “Quick Search”) cangenerate another question mark.
MOST BOOKSTORE SITESLet’s see. “Quick Search.”That must be the same as Search,” right?
Do I have to click on that drop-downmenu thing?
All I know about the book is that it’sby Tom Clancy. Is Clancy a keyword?
(What is a keyword, anyway?)
I guess I have to use the menu.
Clicks on the arrow
Title. Author. Keyword.”
OK. I want “Author.”
Clicks “Author”
Types “Tom Clancy”Clicks “Search”
“
“
2 This was still true when I checked about a year ago. Only now, in 2005, have most of themfinally improved.
Hummm, deixa cá ver....
Amazon.com, on the other hand, doesn’t even mention the Author-Title-Keyworddistinction. They just look at what you type and do whatever makes the most sense.
After all, why should I have to think about how I want to search? And evenworse, why should I have to think about how the site’s search engine wants me tophrase the question, as though it were some ornery troll guarding a bridge? (“Youforgot to say ‘May I?’”)
I could list dozens of other things that visitors to a site shouldn’t spend their timethinking about, like:
> Where am I?> Where should I begin?> Where did they put _____?> What are the most important things on this page? > Why did they call it that?
But the last thing you need is another checklist to add to your stack of Webdesign checklists. The most important thing you can do is to just understand thebasic principle of eliminating question marks. If you do, you’ll begin to notice allthe things that make you think while you’re using the Web, and eventually you’lllearn to recognize and avoid them in the pages you’re building.
[ 17 ]
don’t make me think!
OK. “Search books for _____.”
Types “Tom Clancy”Clicks “Go”
AMAZON.COM
Não perder tempo a pensar:
• Onde é que eu estou?• Onde é que começo?• Onde é que eles puseram____?• Afinal o que é o destaque?• Porque é que lhe chamaram isto?• Isto é um link?
Atingir a usabilidade através de Design de Interacção
• Reduzir o barulho• Uso eficiente de Whitespace• Criar hierarquias visuais• Reduzir texto ao essencial
When you think you’ve got theright aisle, you start looking at theindividual products.
If it turns out you’ve guessed wrong, you try another aisle, or you may back up andstart over again in the Lawn and Garden department. By the time you’re done, theprocess looks something like this:
Basically, you use the store’snavigation systems (the signs andthe organizing hierarchy that thesigns embody) and your ability toscan shelves full of products to findwhat you’re looking for.
Of course, the actual process is alittle more complex. For one thing,as you walk in the door you usuallydevote a few microseconds to acrucial decision: Are you going tostart by looking for chainsaws onyour own or are you going to asksomeone where they are?
It’s a decision based on a number ofvariables—how familiar you arewith the store, how much you trusttheir ability to organize thingssensibly, how much of a hurryyou’re in, and even how sociableyou are.
[ 52 ]
chapter 6
>>
>>
>
>
>
>
NO YES
NO
NOT YET
THOROUGHLYFRUSTRATED?
YES
YES
>>
Enterstore
Look for the right aisle
Look for theproduct
Find it?
Still think you’rein the right
department?
Look for the right department
$ Look for the cash registers
Pay up
Look for exit sign
>
>
When you think you’ve got theright aisle, you start looking at theindividual products.
If it turns out you’ve guessed wrong, you try another aisle, or you may back up andstart over again in the Lawn and Garden department. By the time you’re done, theprocess looks something like this:
Basically, you use the store’snavigation systems (the signs andthe organizing hierarchy that thesigns embody) and your ability toscan shelves full of products to findwhat you’re looking for.
Of course, the actual process is alittle more complex. For one thing,as you walk in the door you usuallydevote a few microseconds to acrucial decision: Are you going tostart by looking for chainsaws onyour own or are you going to asksomeone where they are?
It’s a decision based on a number ofvariables—how familiar you arewith the store, how much you trusttheir ability to organize thingssensibly, how much of a hurryyou’re in, and even how sociableyou are.
[ 52 ]
chapter 6
>>
>>
>
>
>
>
NO YES
NO
NOT YET
THOROUGHLYFRUSTRATED?
YES
YES
>>
Enterstore
Look for the right aisle
Look for theproduct
Find it?
Still think you’rein the right
department?
Look for the right department
$ Look for the cash registers
Pay up
Look for exit sign
>
>
street s igns and breadcrumbs
When we factor this decision in, the process looks something like this:
[ 53 ]
YES
ALMOST
NO
YES
NOT YET
NO
BROWSE
ASK
Credible answer?
>
Ask
>
Find a clerk
>
>
Look for the aisle
Look for the product
>
Find it?
>
>
Find a smarterlooking clerk
>
>
>
Notice that even if you start looking on your own, if things don’t pan out there’s agood chance that eventually you’ll end up asking someone for directions anyway.
>>
>>
>
>
>
>
NO YES
NONOT YET
THOROUGHLYFRUSTRATED?
YES
YES
>>
Ask someone first?
>
Enterstore
Look for the right aisle
Look for theproduct
Find it?
Still think you’rein the right
department?
Look for the right department
$ Look for the cash registers
Pay up
Look for exit sign
>HAD ENOUGH?
YES>
>>
Uilizadores
• Pesquisador
• Clicador
[ 54 ]
chapter 6
Web Navigation 101In many ways, you go through the same process when you enter a Web site.
> You’re usually trying to find something. In the “real” world it might be theemergency room or a can of baked beans. On the Web, it might be the cheapest 4-head VCR with Commercial Advance or the name of the actor in Casablancawho played the headwaiter at Rick’s.1
> You decide whether to ask first or browse first. The difference is that on aWeb site there’s no one standing around who can tell you where things are. TheWeb equivalent of asking directions is searching—typing a description of whatyou’re looking for in a search box and getting back a list of links to places where itmight be.
Some people (Jakob Nielsen calls them “search-dominant” users)2 will almostalways look for a search box as soon as they enter a site. (These may be thesame people who look for the nearest clerk as soon as they enter a store.)
1 S. Z. “Cuddles” Sakall, born Eugene Sakall in Budapest in 1884. Ironically, most of thecharacter actors who played the Nazi-hating denizens of Rick’s Café were actually famousEuropean stage and screen actors who landed in Hollywood after fleeing the Nazis.
2 See “Search and You May Find” in Nielsen’s archive of his Alertbox columns onwww.useit.com.
results
[ 56 ]
chapter 6
Here’s what the process looks like:
Scan results forlikely matches
Enter site
Feel likebrowsing?
>
>
Click on asection
YES NO
NOYES
NO
YES
ALMOSTNOT YET
THOROUGHLYFRUSTRATED?
YES
LEAVE HAPPY
YES NO
YES
NOT YET
HAD ENOUGH?
YES
LEAVE UNHAPPY
NO
>
>>
>>
>
>
>>
>
> >
>
>
>
>>
>
Click on asubsection
Look forwhatever it is
Find it?
>Find it?
Find a search box>
Type your query
Credible results?
Check them out
Think you’re in the right section?
>
Devise a better query
>
[ 61 ]
street s igns and breadcrumbs
Think of how frustrating it is when one of these conventions is broken (whenmagazines don’t put page numbers on advertising pages, for instance).
Navigation conventions for the Web have emerged quickly, mostly adapted fromexisting print conventions. They’ll continue to evolve, but for the moment these are the basic elements:
SectionsSite ID
Local navigation(Things at thecurrent level)
Page name
“You are here”indicator
Subsections
Small textversion
Utilities
>
>
>>
www.gap.com
Onde é que eu estou mesmo?
[ 72 ]
chapter 6
Now, I’ll admit I’m a sucker for this kind of treatment because I come fromBoston, where you consider yourself lucky if you can manage to read the streetsign while there’s still time to make the turn.
The result? When I’m driving in L.A., I devote less energy and attention todealing with where I am and more to traffic, conversation, and listening to AllThings Considered. I love driving in L.A.
Page names are the street signs of the Web. Just as with street signs, when thingsare going well I may not notice page names at all. But as soon as I start to sensethat I may not be headed in the right direction, I need to be able to spot the pagename effortlessly so I can get my bearings.
There are four things you need to know about page names:
> Every page needs a name. Just as every corner should have a street sign,every page should have a name.
Designers sometimes think, “Well, we’ve highlighted the page name in thenavigation.9 That’s good enough.” It’s a tempting idea because it can save space,and it’s one less element to work into the page layout, but it’s not enough. Youneed a page name, too.
> The name needs to be in the right place. In the visual hierarchy of the page,the page name should appear to be framing the content that is unique to thispage. (After all, that’s what it’s naming—not the navigation or the ads, whichare just the infrastructure.)
9 See “You are here” on page 74.
I’m at the corner ofAuctions and Sell an Item.
Los Angeles Boston
Russett RdCovington Road
• Todas as páginas devem ter nome• O Nome tem de estar no Sitio Certo!
chapter 10
[ 162 ]
No matter what the real reason was, they did an outstanding job of depleting mygoodwill towards both the airline and their Web site. Their brand—which theyspend hundreds of millions of dollars a year polishing—had definitely lost someof its luster for me.
Most of this book has been about building clarity into Web sites: making sure thatusers can understand what it is they’re looking at—and how to use it—withoutundue effort. Is it clear to people? Do they “get it”?
But there’s another important component to Web usability: doing the rightthing—being considerate of the user. Besides “Is my site clear?” you also need to be asking, “Does my site behave like a mensch?”
The Reservoir of GoodwillI've always found it useful to imagine that every time we enter a Web site, westart out with a reservoir of goodwill. Each problem we encounter on the sitelowers the level of that reservoir. Here, for example, is what my visit to the airlinesite might have looked like:
I enter the site.
My goodwill is a little low,because I'm not happythat their negotiationsmay seriouslyinconvenience me.
Latest press release is fivedays old.
I go to the About Us page.
No promising links, butplenty of promotions,which is very annoying.Why are they trying tosell me more ticketswhen I'm not surethey're going to fly metomorrow?
I search for “strike” and findtwo press releases about astrike a year ago, and pagesfrom the corporate historyabout a strike in the 1950s.
At this point, I would like toleave, but they're the solesource for this information.
I look through their FAQlists, then leave.
I glance around theHome page.
It feels well organized,so I relax a little. I'mconfident that if theinformation is here, I'llbe able to find it.
There's no mention ofthe strike on theHome page.
I don’t like the factthat it feels likebusiness as usual.
There's a list of fivelinks to News stories on the Home page butnone are relevant.
I click on the PressReleases link at thebottom of the list.
O custo da Usabilidade
•A usabilidade não é apenas sobre pesquisa e melhoramentos, ela tem um impacto real e financeiro•Alterações de última hora no design•Aumento nas vendas •Diminuição dos custos de formação e apoio•Redução dos custos de manutenção •Maior vida útil do mercado
A importancia do Design
•Comunicação•Branding , Identificação e reconhecimento•Para destacar e diferenciar
na web
Tipos de Design
UI (User Interface)UX (User Experience)Visual DesignInformation ArchitectureDatabaseSystemInteraction...
Proce!o de Design
Briefing
Pesquisa
Design
Ajuste
É o que o Cliente nos dá.É o documento que define as suas expectativas.
Lançamento
Briefing
Pesquisa
Design
Ajuste
Visão/Percepção que nos ajuda a gerar ideias para o design e para a Arquitectura de Informação.Envolve benchmarking e prototipagem.Lançamento
Briefing
Pesquisa
Design
Ajuste
Desenhos, cores, tipografia, elementos, conceitos, Arquitectura de Informação.
Lançamento
Briefing
Pesquisa
Design
AjusteRevisões e melhoramentos.
Lançamento
Briefing
Pesquisa
Design
Ajuste
Rocket launch! Party!Lançamento
Briefing
Pesquisa
Design
Ajuste
Oi, cadê os testes de usabilidade?
Lançamento
Melhores Prácticas para um projecto de Webdesign
Definir ObjectivosBenchmarkingInspiraçãoInformaçãoOrganizaçãoAnotar Requisitos / ObjectivosPreparar e planear as tarefas de desenvolvimentoGestão do projectoPrototiparTestes de Usabilidade durante todo o projectoVerificar checklist antes de lançar
Dicas & Fe"amentas
Inspiração
• CSSMania (cssmania.com)• CSS Awards (www.thecssawards.com/)• Design Shack (designshack.co.uk)• Colourlovers (www.colourlovers.com//)• Kuler (kuler.adobe.com/)• A Janela
Tipografia
Typechart (www.typechart.com/)MyFonts (new.myfonts.com/)Dafont (dafont.com/)Cufon (cufon.shoqolate.com/generate/)
Typester (www.typetester.org/)
Software
• Aptana Studio (aptana.org)• Gimp (gimp.org)• TopStyle lite (topstyle.en.softonic.com/)• Xampp (Apache + php + Mysql)• Firebug (extensão Firefox)• FIlezilla (filzilla-project.org)• IETester
Magia >> Javascript
Jquery (jquery.com/)JqueryUI (jqueryui.com/)Mootols (mootools.net/)Prototype (http://www.prototypejs.org/)Yahoo! UI Library (eveloper.yahoo.com/yui/)
Imagens
•Flickr Color Picker (krazydad.com/colrpickr)
•iStockphoto (istockphoto.com)
•Flickr “gomedia” Group (flickr.com/groups/gomedia)
CSS Frameworks
960 Grid System (960.gs)Blueprint (blueprintcss.org/)YUI Grids (developer.yahoo.com/yui/grids/)
CSS Frameworks ??Conjunto de ficheiros que constituem um modelo definido para o desenvolvimento rápido de layouts html. Limitam a necessidade de utilizar tabelas e dão coesão visual entre os elementos da página.
È mais fácil de aplicar a "regra dos terços", o que resulta num layout visualmente atraente para os olhos humanos.
Produzir layouts assimétricos para textura visual.
Redução do esforço de futuro, se for necessário reposicionar elementos ou características que as tornam mudanças (tipografia, margens, etc) para os elementos relacionados. Suporte transversal a browsers (Sim, inclusive ao IE6)
Reduzido esforço para a produção de layouts de página web, em comparação com a codificação da CSS necessário partir do zero.
Mais flexibilidade e rapidez na criação dos Layouts.
Gestão de Projecto e Conteúdos
GoPlan (goplan.com/)Basecamp (basecamphq.com/)
Wordpress (wordpress.org/)Drupal (drupal.org/)Magento (magentocommerce.com/)
As tendências
Ilustrações
MenusGigantes
Tipografia
68
Forms
72
Ícones
Mu$as Gracias!!
Célia Leocádio
http://delicious.com/wedesignit
wedesignit.org
projectosweb.com
wdesign-it.com