IHC - ATIVIDADE 3

Faculdade de Tecnologia de Sorocaba Tecnologia em Análise e Desenvolvimento de Sistemas

INTERAÇÃO HUMANO-COMPUTADOR: HUMANO-COMPUTADOR: GUIDELINES  ATIVIDADE  ATIVIDADE 3

Prof.º Sergio oraes Disci!lina" Intera#$o %umano&'om!utador  (etici (eticia a )odrig )odrigues ues 'orr*a 'orr*a )ob )oberto erto )ibei ibeiro ro 12n 12nior ior

Sorocaba Setembro50+/

)A" ++3+, ++3+,-/ -/03+ 03+,3 ,3 )A" ++3+ +3+,- -03+3 3+34

Sumário

1 Introdução.......................................................................................................................2 2 Objetivo........................................................................................................................... 3 3 Guidelines....................................................................................................................... 3 3.1 Conceito...................................................................................................................................3 3.2 Exemplos de Guidelines...........................................................................................................5 4

Conclusão........................................................................................................................9

Referências.......................................................................................................................10

1 Introdução A interface gráfica se analisada com um ponto de vista técnico e acadêmico, nos mostra diversos conceitos amplamente utilizados na construção de interfaces de qualidade. As guidelines são exemplos desses conceitos. Seu uso não é obrigatrio, porém elas nos a!udam a identificar quais são e como devem ser os elementos de nossas interfaces, tem ob!etivo de a!udar a garantir uma boa usabilidade. São feitas na fase inicial do pro!eto e o designer a faz normalmente de maneira generalizada. "las são utilizadas em um dos processos do modelo de S#neiderman, mais especificamente na fase inicial do modelo, sendo inclusive utilizadas por grandes empresas como $icrosoft, Apple, %oogle, &a#oo, '($, entre outras para definir a identidade visual da interface entre outras especificaç)es, e garantir consistência tanto no produto quanto entre produtos de um determinado fabricante.

2 Objetivo * ob!etivo deste trabal#o é apresentar o tema %uidelines, falando sobre qual é o conceito, quais suas finalidades segundo autores como S#neiderman+--/, e 0oc#a e (araunas1as+--2/. Será apresentado o modelo de 2 pilares de S#neiderman+--/, e alguns exemplos de guidelines dentro de empresas de 3.' e empresas de outros ramos. * prximo capitulo irá apresentar o conceito de %uidelines.

3 Guidelines

3.1 Conceito 4odemos dizer que guidelines são orientaç)es ou recomendaç)es que devem ser consideradas na elaboração e avaliação de um soft5are com o ob!etivo de a!udar a garantir uma boa usabilidade. São criadas principalmente a partir do senso comum e da experiência na elaboração de outros pro!etos de soft5are. * uso de guidelines não deve ser entendido como algo obrigatrio no design, mas sim como algo que nos orienta mel#or na criação do mesmo. A aplicação de guidelines embora não se!a trivial a!uda o designer a focar no que é necessário e a lidar com restriç)es e compromissos do design. Segundo S#neiderman +--/, os guidelines são documentos que a!udam a desenvolver uma linguagem comum e, em seguida, promover a consistência entre m6ltiplos pro!etos em termos de aparência, terminologia e sequências de ação. * guideline registra as mel#ores práticas derivadas da experiência prática com exemplos e contraexemplos apropriados. Segundo ele, a criação de um guideline enga!a a comunidade de design em uma discussão de formatos de entrada ou de sa7da, sequências de ação, terminologia e dispositivos de #ard5are. 4ara S#neiderman +--/, os guidelines prescrevem a cura para problemas de design, o cuidado contra os perigos e fornece lembretes 6teis. Alguns dos guidelines citados por S#neiderman +--/ são a navegação da interface, organização de exibição, atração da atenção do usuário e facilidade na entrada de dados. * $odelo de S#neiderman é baseado em 2 pilares8

9. %uidelines+gerados pelo designer no in7cio do processo/: . ;erramentas de prototipagem: 2. 'nspeção de usabilidade +teste com usuários/.

Figura 1: Diagrama representativo do modelo de interfaces baseado em 3 pilares de !neiderman

 receita de design?, mas sim como um con!unto de princ7pios utilizados parar orientar o design. "las afirmam que a aplicação de guidelines a!uda o designer a focar no que é necessário e a lidar com restriç)es e compromissos de design. A definição de guidelines a serem utilizadas no design de determinado sistema deve ser acompan#ada de exemplificação de seu uso, exceç)es e dados  psicolgicos que a !ustificam. Alguns dos guidelines citados por 0oc#a e (aranaus1as +--2/ são falar  a l7ngua do usuário, reduzir a carga cognitiva, criar para o erro e manter consistência. @m exemplo de guideline é um princ7pio de design apresentado por urret e 3rezona +apud

4reece 9BBC et al.9BBC p.CB-/, que prescreve o n6mero de cores a serem usadas na tela, sugerindo que >não deve ser esperado que o usuário médio lembre +o significado de/ mais que  a D cores...displaEs deveriam ter não mais que C cores...?. 4reece +9BBC/ argumenta que o verdadeiro sentido das guidelines é o de princ7pios em alto n7vel, largamente aplicáveis.

3.2 Exemplos de Guidelines

Exemplos de guideline nos aplicativos Android: "

Guideline 1: “Deixe-me dar meu toque pessoal” As pessoas adoram adicionar toques pessoais, pois isso as a!uda a se sentirem = vontade e em controle. ;ornecer padr)es sensatos e belos, mas também considerar personalizaç)es divertidas e opcionais que não pre!udiquem as tarefas principais.

Guideline 2: “Conhea-me” Fon#ecer as preferências das pessoas no decorrer do tempo. "m vez de pedir que façam as mesmas escol#as repetidamente, colocar escol#as anteriores em alcance fácil.

Guideline !: ”"ostre s# o que $ preciso% quando eu precisar” As pessoas se sentem oprimidas quando veem coisas demais de uma vez. etal#ar tarefas e informaç)es em partes pequenas e diger7veis. *cultar opç)es que não se!am essenciais no momento e ensinar as pessoas = medida que avançam.

Guideline &: “'unca perca as minhas coisas” Salvar o que as pessoas criaram e deixar que elas acessem de qualquer lugar. Gembrar de configuraç)es, toques pessoais e criaç)es entre celulares, tablets e computadores. 'sso torna a atualização a coisa mais fácil do mundo.

Guideline (: “)aa o tra*alho pesado por mim” ;azer com que novatos se sintam peritos possibilitando que façam coisas que nunca ac#aram  poss7veis. 4or exemplo, atal#os que combinem vários efeitos de fotos podem fazer com que fotografias amadoras pareçam incr7veis com apenas alguns passos.

Exemplos de guideline em empresas +ora da ,rea de . Guideline 1: 'etshoes http://000netshoescom*r/ 

GaEout mais limpo, facilitando a leitura:



(ot)es de call to action mais bem definidos:

Guideline 2: Amaon - http://000amaoncom*r/ 

A Amazon evidencia as revie5s mais bem classificadas por outros usuários. Assim, o cliente não perde tempo lendo revie5s que não acrescentam nada na decisão de sua compra.



* botão 9HFlique. Fomo a lo!a !á tem o endereço e a forma de pagamento registrados de clientes cadastrados, eles podem comprar um produto sem precisar colocáHlo no carrin#o de compras. (asta clicar em IFompre com 9HFliqueI e o pedido será feito instantaneamente.

Guideline !: 3cean Drop  http://oceandropcom*r/ 3rataHse de um eHcommerce que vende cápsulas de superfoods. 

Fonstrução de um site clean, com textos curtos e imagens que IconversamI e se conectam entre si:



4osicionamento certo dos bot)es:



@sando fotos reais no lugar de animaç)es, os responsáveis pela usabilidade do site acreditam que despertam mais facilmente o dese!o do usuário de comprar na lo!a.

Guideline &: 3ppa - http://000oppacom*r/ @m dos mais conceituados eHcommerces de mveis do (rasil 

Fonceito multiplataforma. 'sso significa que #á conte6dos e tecnologias espec7ficas  para cada tela +tablet, des1top, smartp#one/.



*utras mudanças foram concretizadas aps muitos testes AJ(.