What the hell is UX, e IxD – Design de Interação, abordagem direta uma galera tem me perguntado sobre a carreira de UX Specialist, o que é, o que deixa de ser, onde encontra-se material, etc.

Vou resumir, ou tentar.

UX Specialist é o indivíduo especializado em User Experience, a essa altura você deve dizer “você está de brincadeira comigo…”, mas não poderia deixar de enfatizar isso, já que, quando falo especialista, é especialista mesmo, é alguém que entende o assunto, não é apenas um termo.
Portanto, sem entrar no mérito da profissão, já que não existe faculdade para formar especialistas em UX, e muito menos cursos sobre o assunto. Os profissionais vem de diversas áreas do design, mas quando falamos em usuário temos que pensar em algo muito peculiar, INTERFACES, a maioria esmagadora vem do segmento de design de interfaces e do estudo em IxD.

Se em um futuro próximo eu ver de acordo com a perguntas dos leitores que há ainda falta de entendimento em relação a esse tema eu posso postar o que é essa carreira em alguns dos seus detalhes, por hora vou municiar vocês com material, muito material, links e mais links para você encontrar o que quiser a respeito de User Experience, mas já aviso, em português não tem coisa boa, não significativa, mas com esforço você encontra, portanto terá que ser em inglês, e se, teu inglês não está lá aquelas coisas faz um esforcinho e pede ajuda ao titio Google, garanto que vai valer a pena.

De quebra, vou dar um Help com um vídeo de introdução muito interessante… do Don Norman, (@becknovaes gosta muito dos conceitos desse especialista), acho o velhinho simpático e com uma bagagem invejável, o vídeo tem legenda em português, vale a pena.

Don Norman: 3 maneiras pelas quais o design te faz feliz

.

Você vai perceber nos links abaixo que haverá temas relacionados a IxD, IA, etc, entender todos esses assuntos fazem parte do papel de UX Specialist.

Isso não significa que eu concordo com todos os pontos de vistas de todo esse conteúdo, isso é material de investigação, de estudo. Eu tenho minhas próprias convicções sobre essa matéria User Experience, devido a meus anos de trabalho na área, pelas milhares de tentativas de erros e acertos.

Espero que com esse material você encontre o que precisa para largar de vez esse tema ou amar.

.

UX BOOKS

.

UX Primer

.

• The Design of Everyday Things by Don Norman
• Don’t Make Me Think by Steve Krug
• Não me faça pensar, Steve Krug  o mesmo de cima só que em português

.

Design Thinking

.

• Sketching User Experiences by Bill Buxton
• Emotional Design: Why We Love (or Hate) Everyday Things by Don Norman
• The Inmates Are Running the Asylum by Alan Cooper

.

Strategy

.

• Subject To Change by Peter Merholz, Todd Wilkens, Brandon Schauer, and David Verba

.

Process

.

• The Elements of User Experience by Jesse James Garrett
• About Face 3 by Alan Cooper, Robert Reimann, and David Cronin
• A Project Guide to UX Design by Russ Unger and Carolyn Chandler

.

Principles

.

• Designing for the Social Web by Joshua Porter
• Designing Interfaces by Jenifer Tidwell
• Designing Visual Interfaces by Kevin Mullet
• Information Architecture for the World Wide Web (the Polar Bear book) by Louis Rosenfeld and Peter Morville
• Information Architecture: Blueprints for the Web by Christina Wodtke and Austin Govella
• Designing Web Navigation by James Kalbach
• Web Form Design by Luke Wroblewski

.

Activities

.

• Usability Engineering by Jakob Nielsen
• Handbook of Usability Testing by Jeffrey Rubin and Dana Chisnell
• Observing the User Experience by Mike Kuniavsky

.

Documentation

.

• Communicating Design by Dan Brown

.

Extra Credit

.

• Set Phasers on Stun: And Other True Tales of Design, Technology, and Human Error by S. M. Casey

.

UX BLOGS

.

• Konigi by Michael AngelesTips, tools and techniques for being a better user experience designer
• Disambiguity by Leisa ReicheltThe ins and outs of designing a product with an existing, and passionate, community
• EverydayUX by Alex RainertA fresh look at the world around us through UX-tinted glasses
• Graphpaper by Christopher FaheyCritical analysis of some of the toughest issues facing UX designers today
• inspireUX by Catriona CornettCubical-wall worthy quotations from a variety of practitioners on how and why to create positive user experiences
• Bokardo – Social Design by Joshua PorterFor everything you need to consider when designing socially-focused stuff
• Logic + Emotion by David ArmanoReusable visualizations and valuable synthesis at the intersection of user experience design, marketing and business
• Putting People First by ExperientiaA great resource for all things UX from around the globe
• Brain Sparks by User Interface Engineering (UIE)Inside the brilliant minds of user research pioneer Jared Spool and his team
• Design for Service by Jeff HowardInsights into all the ways companies need to be communicating with their customers, outside of their websites
• UX Booth by Redd Horrocks, Matthew Kammerer, David Leggett, and Andrew Maier

.

UX PUBLICATIONS

.

• Boxes and ArrowsJournal dedicated to discussing, improving and promoting the work of the information architecture community
• interactionsMagazine including timely articles, stories, and content related to the interactions between experiences, people, and technology, published by the Association for Computing Machinery
• UXmattersInsights and inspiration for the user experience community written by many distinguished practitioners
• Core77Industrial Design content and community site – articles, discussions, interviews and resources

.

LOCAL EVENTS

.

• UX Book Club
• IxDA chapters
• UPA chapters
• IAI Local Groups
• SIGCHI chapters
• User Experience Meetups
• Information Architecture Meetups
• Lots more events listed at UXnet.org

.

ORGANIZATIONS

.

• Information Architecture Institute (IAI)
• Interaction Design Association (IxDA)
• Usability Professionals Association (UPA)
• User Experience Network (UXnet)
• Special Interest Group – Computer Human Interaction (ACM/SIGCHI)

.

MAILING LISTS

.

• IxDA mailing list
• IAI mailing list
• NYCCHI mailing list
• SIGCHI in other cities

.

WEBINARS

.

• UIE’s Virtual SeminarsA monthly series of online seminars giving you the chance to hear the latest perspectives in the world of design from the field’s premier experts.
  $129 each. 90 minutes.
• Rosenfeld Media’s Future Practice WebinarsThe cutting edge of contemporary user experience research and design methods and practices.
  $99 each. 60 minutes.
• Adaptive Path’s Virtual Seminars$129 each. 75 minutes.
• Smart Experience online material

.

WORKSHOPS

.

• UIE RoadshowIn this full-day, in-depth seminar you’ll discover the key experience-design factors, analyze your team’s strengths and weaknesses, create an experience vision, and learn the role of delight.
• AdaptivePath’s UX IntensiveThis four-day workshop series is for experienced professionals wanting to take their practice to the next level.
• Cooper U A practical collection of courses that help product team members improve their effectiveness from early planning all the way through implementation.

.

CONFERENCES

.

Inspirational

.

• Good Experience Live (GEL)A conference and community exploring good experience in all its forms — in business, art, society, technology, and life.
• IDEA ConferenceThe world’s foremost thinkers and practitioners sharing the big ideas that inspire, along with practical solutions for the ways people’s lives and systems are converging to affect society.
• Adaptive Path’s Managing Experience (Mx)Thought leaders from major corporations show you how smart and visionary management will help you successfully compete in a difficult economy.

.

Practical

.

• UIE’s User Interface Conference Examining the biggest issues in the world of web design, information architecture, and usability.
• NN/g’s Usability Week A three-day usability camp, a three-day intensive session on interaction design, and several specialized, day-long tutorials on core usability topics. Come for as few or as many days as you want.
• UPA Tutorials, workshops, Experienced Practitioners program, then two and a half days packed with presentations, Idea Markets, and opportunities to network with other user experience professionals.

.

Mixed

.

• IxDA Interaction Conference Three days of inspirational and tactical sessions geared at anyone who practices Interaction Design, as well as a day of pre-conference workshops.
• IA Summit The premier gathering place for information architects and other user experience professionals. Two days of pre-conference sessions, two keynotes and over 50 presentations.
• Adaptive Path’s UX Week A mix of inspiring talks from recognized thought leaders and hands-on workshops delivering takeaway skills, this event delivers for user experience professionals at all levels — directors, managers, and practitioners.
• UIE’s Web App Summit The four-day Summit includes two days of intensive full-day workshops and two more days of featured presentations from world-renown experts, to give you fresh perspectives and new insights on today’s web app design challenges.
• UX Australia 3-day user experience design conference, with inspiring and practical presentations, covering a range of topics about how to design great experiences for people.
• UX London A unique three-day event combining inspirational talks with in-depth workshops presented by some of the industry’s biggest names.

.

Academic

.

• ACM’s CHI The premier international conference for the field of human-computer interaction.

.

SCHOOLING

.

Human Computer Interaction

.

• Human Computer Interaction Institute at Carnegie Mellon University
  (where I received a bachelor’s and master’s degree)
• Master of Science in Information – HCI Specialization at University of Michigan
• Full list of HCI degree programs

.

Interaction Design

.

• Master of Design in Interaction Design at Carnegie Mellon University
• Master of Fine Arts in Interaction Design at School of Visual Arts
  (starting fall 2009)
• Undergraduate minor in Interaction Design at Savannah College of Art and Design
• http://www.designdeinteracao.com.br/ Puc de Minas
• Pós na FIT de Design de Interação Curso recente criado na Faculdade Impacta de Tecnologia – SP capital

.

Misc

.

• Interactive Telecommunications Program at NYU’s Tisch School of the Arts
• Institute of Design at Illinois Institute of Technology

_________________________________________

Eduardo Horvath é UX Specialist e Designer na DClick.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.
@eduardohorvath

Não fui só eu: devia ter umas 600 pessoas na Universidade Anhembi-Morumbi, no primeiro dia das sessões técnicas. A EDU (Escola de Design da Unisinos) e o Design UFRGS (minha futura morada, em breve) estavam em peso :0)

A mesa que eu assisti (metodologia) estava bem legal. Uma pena que a Janet Murray não foi… Não entendi que “complicações políticas” ela citou como justificativa para não ter aparecido… Deve ter sido uma piada, porque muita gete riu

Fora isso, espero que nas próximas edições sejam apresentados mais artigos que saiam do feijão com arroz em que a pesquisa em design se transformou: gráfico, tipografia, ergonomia, produto, digital, história, gestão. Sério gente, ainda tem o que falar sobre isso? Deixa isso pros TCCs, huahuahua. E ainda por cima ergonomia/digital têm seus próprios congressos (ergodesign+ usihc, sem falar no da abergo). Não que esses tópicos não sejam importantes, mas acho que é hora de procurar outras coisas pra pesquisar.

Fora esses assuntos que (eu acho) que já estão “meio” batidos, teve muita coisa legal: moda (gente nova, uêba!), serviços, afetividade/emoção/experiência e um – UM – artigo sobre cognição. Gentem! Se olhar a Design Studies, Design Issues; é só isso que se faz.

Meus dois artigos foram sobre assuntos bem feijão-com-arroz, mas são resultados de pesquisas antiiiigas. Eu, daqui pra frente, só Design Cognition, chique-no-úrtimo!

O Desenvolvedor-Designer e o Design da Interação

Reflexões sobre a escolha entre duas interfaces: relato de um processo

E aí embaixo duas fotos: uma panorâmica e uma do pessoal da EDU (que eu consegui juntar pra “bater a foto”).

Atenção: antes de começar, saiba que este texto foi escrito por uma designer com “alguma” experiência em aplicações para web – uma pessoa que programa (modéstia à parte) bem e que tem um mestrado em ergonomia. Este texto mostra as mudanças em um projeto motivadas pelo compromisso da nossa personagem de aderir às “regras” do design de interfaces. Este foi o primeiro aplicativo para mobile que ela projetou, e é assim que ela se sente:

Vamos deixar então que nossa designer conte como foi…

Design de interfaces para mobile (no Brasil)

Conheci, ano passado, três caras que estavam a fim de desenvolver aplicativos para celular. Acho que formamos um excelente time, pois reunimos experiência e conhecimento técnico. Além disso, temos alguém no grupo com um “feeling para negócios” (sorry, Marco, não sei descrever de outra forma), o que é pré-condição para engrenar. Depois de muitas reuniões (do Marco), conseguimos vender um projeto, cujo briefing descrevo: criar um aplicativo para ser usado em eventos. As funcionalidades oferecidas são:

• Receber avisos dos organizadores (por exemplo: alteração na agenda).
• Receber avisos promocionais dos patrocinadores.
• Fazer perguntas aos palestrantes.
• Trocar cartões de visita virtuais.
• Enviar convites para meetings dentro da área do evento.

O rationale é: pessoas que vão a eventos têm interesses comuns, mas nem sempre se conhecem – aliás, muitos vão a estes eventos para se conhecerem.  Porém, o sistema de crachás de identificação tem dois problemas: algumas pessoas simplesmente não os usam e é constrangedor ficar lendo o crachá dos outros. O aplicativo seria uma forma de fazer com que as apresentações fossem mais eficientes, permitindo que os participantes escolham com quem querem manter contato.

A restrição explícita: deve funcionar na maior parte dos aparelhos. Minha restrição explícita: deve ser boa usabilidade. Lógico.

Claro, eu nunca havia feito nada para mobile, mas tinha uma idéia de mais algumas restrições:

• Interação pelas teclas de direção; seleção pela tecla do meio. Sem touch.
• Otimizar a transmissão de dados. Toda vez que você envia ou recebe dados, vê uma mensagem desagradável avisando da conexão. Isso, mais importante do que o custo em reais, gera desconfiança: “porque estou toda a hora sendo avisado disso?”.

Ok, vamos para o Balsamiq (que só tem iPhone como modelo, mas abstrai, ok?) ver como fica. Veja aí como eu desenhei a área das “Perguntas”.

Para você entender meu raciocínio, vou colocar o processo em forma de diálogo: eu e um Balde de Água Fria.

Eu – Vamos usar tabs, certo? Isso permite que o usuário veja em que sessão ele está. Quando ele quiser fazer “perguntas” (por isso o título, entende?), escolhe a palestra e clica nela (com o botão do meio). Isso faz com que ele veja a tela da direita: ali ele pode enviar uma pergunta para o palestrante.

Balde de Água Fria – Hummm, mas ele também pode enviar respostas para enquetes e a avaliação da palestra. Você sabia disso desde o início, não foi idéia do cliente na última hora.

Eu – Certo. Quem sabe então a gente coloca uma barra de botões?

BAF – Não cabe… Muito texto nos labels…

Eu – Vamos colocar uns ícones…

BAF – Esses ícones do Balsamiq são uma caca…

Eu – É eu sei. Mas a gente vê uns legais depois…

BAF – Ok, mas você está com um problema de coerência…

Eu – O QUÊ? DE COERÊNCIA?

BAF – Pois é… Você está usando tabs para alternar entre telas. E sua barra de botões tem o mesmo comportamento. Além disso, na tela de “Convites recebidos”, por exemplo, você está usando uma barra de botões com ícones para operar sobre um dado (o cartão de apresentação). Quer dizer que em uma área a barra de botões troca de tela e na outra ela sinaliza operações possíveis sobre um dado.

BAF – E não é só isso. Olhando bem, parece que você também tem um problema de consistência.

Eu – O QUÊ? DE CONSISTÊNCIA?

BAF – Sim. Veja a tela “Perguntar”. Aqui você usa texto no botão. Afinal, é texto ou ícone?

Eu – P*** m***, é verdade.

Eu – Ah, já sei! Vamos fazer assim, ô:

EU – Quando o usuário clicar na palestra para fazer uma pergunta (ou enquete ou avaliação), as tabs vão mudar de label, e para ele voltar, é só clicar na tab bem à esquerda que diz “<<”.

BAF – Nossa… Você realmente se preocupa com a coerência. O problema foi mesmo resolvido, afinal agora você só tem tabs. Só que agora você tem dois níveis de hierarquia que parecem ser um só. Além disso, você alterou o comportamento esperado de um componente (o tab).

Eu – P*** m***, HIERARQUIA e MUDANÇA DE COMPORTAMENTO? Dá um descanso, BAF!

BAF – Sorry, mas você pediu par eu ser chato…

Eu – Tá bom.

Eu – Olha só, podemos usar janelas modais! Quando o usuário for enviar a pergunta, por exemplo, uma nova janela será aberta. A gente pode deixar o que está atrás meio transparente, com um blur, sabe? Aí o usuário saberia que foi para outro nível de edição.

BAF – Entendo. Assim você não muda o comportamento dos tabs e preserva a hierarquia.

Eu – Isso mesmo. Sabia que você iria entender.

BAF - Como fica quando houver três níveis de hierarquia?

Eu – Não haverá.

BAF – Você sabe que não deve dizer isso…

Eu – Vá à merda, BAF.

BAF – Ok. Você sabe que a luminosidade pode atrapalhar a leitura destas janelas com transparência, não sabe?

Eu – Vá à merda, BAF.

E esta é a história da primeira versão do layout no Balsamiq. Algum tempo depois, o João (nosso desenvolvedor-java-rulez) fez a seguinte observação:

João – Sabe, Gabi, essa tela de buscar aqui está complicada de navegar… Acho que tem problemas de usabilidade… O usuário tem que clicar várias vezes até chegar no botão de buscar. Daí eu consertei isso colocando um menuzinho-aqui-assim.

OK, PARA TUDO.

BAF, COMO É QUE VOCÊ NÃO ME AVISOU???

BAF – Bem, não me dei conta disso.

EU – Mas “menu”? O usuário não tem como ver o que tem no menu. Depois, ele precisa DESPERDIÇAR um clique só par ver o que tem no menu. E se o menu tiver mais de um nível, ele vai ter que desperdiçar outros cliques só pra inspecionar o menu. ISSO NÃO PODE!

BAF – Pois é, é muito ruim, eu sei. Mas sabe que o João está certo? Dá uma olhada nessa tela aqui.

BAF – Imagina que a pessoa está no primeiro item da lista, ok? E que ela quer enviar um cartão de apresentação. Quantos cliques ela tem que dar?

Eu – Nove para chegar até “Networking” e um para selecionar. Que m****.

Eu – É… Acho que estou negligenciando as softkeys… Vou fazer o seguinte: usar a softkey da esquerda para abrir um menu, e a da direita para outras ações.

Eu – Tipo assim: o usuário pode continuar navegando com os direcionais e selecionando os itens da lista (tela da esquerda). Quando ele clicar numa palestra, ele vai para a tela que está à direita. Ali eu vou usar um título com breadcumbs, pra mostrar onde ele está e de onde ele veio (só que não pode ser feio que nem esse do Balsamiq!). E nas softkeys tem o menu (na esquerda) e um botão, quando necessário (na direita). E para minimizar essa coisa de desperdiçar cliques inspecionando o menu, vamos tentar usar as mesmas opções sempre que possível, ok?

BAF – É, agora parece bom.

Eu – Vamos ver o que os guris acham.

E AÍ, GURIS, O QUE VOCÊS ACHAM?

Hoje ao migrar para o Delayed_job 2.0.2 me dei conta que os erros que viessem a acontecer no nos jobs em background não seriam enviados para o Hoptoad.

O Hoptoad por padrão só captas as exceptions que ocorrerem no controller. Logo seus rake tasks e background_jobs ficam de fora.

Para resolver este problema a melhor forma que encontrei foi fazer um hack leve no delayed_job. Sempre que faço algum hack acho imprescindível que este seja feito na aplicação e não no fonte da gem e criar uma versão própria. Ter uma versão própria de uma gem com hacks eu acho a pior alternativa possível.

Hoje ao migrar para o Delayed_job 2.0.2 me dei conta que os erros que viessem a acontecer no nos jobs em background não seriam enviados para o Hoptoad.

O Hoptoad por padrão só captas as exceptions que ocorrerem no controller. Logo seus rake tasks e background_jobs ficam de fora.

Para resolver este problema a melhor forma que encontrei foi fazer um hack leve no delayed_job. Sempre que faço algum hack acho imprescindível que este seja feito na aplicação e não no fonte da gem e criar uma versão própria. Ter uma versão própria de uma gem com hacks eu acho a pior alternativa possível.

Depois de abrir um ticket no Hoptoad eles me disseram que não tinham nada pronto em relação a isto. A minha solução foi primeiro escrever um Job que falhe e os specs que comprovem isto:

Em seguida o que fiz foi dentro do initializer que configuro o Delayed_job aplicar o hack. Como o Delayed_job já tem um método que trata as falhas dos jobs o que eu queria fazer é apenas também chamar o notify do Hoptoad e rodar o processo comun do DJ.

Para não duplicar o método, o que seria uma péssima idéia e nada DRY, eu usei uma técnica conhecida como Alias Chain para armazenar o método original e sobreescreve-lo com o meu novo método que faz a inclusão do Hoptoad e depois chamar o original armazenado.

Esta é uma técnica simples mas que ajuda muito em situações como esta. Veremos esta e muitas outras formas de solucionar problemas diversos no novo curso da eGenial: Imersão Ruby on Rails , espero ver todos lá

Hoje a noite eu embarco para Las Vegas para participar do MIX10. Esta será uma viagem especial para mim por vários motivos:

1. MIX. Precisa dizer mais alguma coisa?
2. Será minha primeira viagem internacional.
3. Estarei reprensentando o @XAMLCast no envento.

A quantidade de assuntos interessantes e importantes que será mostrada e disponibilizada no MIX10 não tem precedentes. Teremos novidades sobre Silverlight 4, Visual Studio 2010, Expression Blend 4, ASP.NET MVC2, muitas sessions sobre web standards e afins, provavelmente alguma coisa sobre o IE9 e a vedete do momento Windows Phone 7.

Estou muito empolgado com tanta novidade, principalmente com a consolidação do Silverlight como uma plataforma importante de desenvolvimento inclusive no Windows Phone 7. Aliás, estou muito empolgado com o Windows Phone 7. Não vejo a hora de colocar as mão nesse brinquedo.

Como alguns de vocês já devem saber, eu estou trabalhando 1/2 período na Microsoft (ajudando o pessoal de DPE com algumas demandas técnicas) e, inevitavelmente, já estou sabendo de algumas coisas que vão acontecer, mas tudo o que posso dizer é que esse MIX será o melhor até hoje! Para aqueles que não poderão estar lá, assistam aos keynotes ao vivo via Silverlight Smooth Streaming pela internet nos dias 15 e 16, às 12:00h pelo site http://live.visitmix.com. Além disso, todas as sessions serão gravadas e disponibilizadas para download em até 24h.

Enquanto eu estiver lá, vou tentar gravar algumas “entrevistas” para o @XAMLCast com celebridades da nossa área. Inclusive, já tenho algumas confirmações (surpresa). Mas algumas pessoas são um pouco mais difíceis pois serão muito solicitadas durante o evento e é aí que peço a ajuda de vocês. Enviem tweets para pessoas que vocês gostariam que eu entrevistasse lá. Acredito que se algumas pessoas enviarem, nossa chances de conseguir aumentam. O Roberto Sonnino (@robertos_br) já começou esse movimento. Sigam ele e retweetem suas mensagens. Mas por favor, não enviem mais de uma mensagem para a mesma pessoa pois não queremos incomodar.

Estarei utilizando o Twitter sempre que possível (ou seja, sempre que tiver wifi). Para saber o que está acontecendo a cada instante, ou onde estou, sigam @kelps, @xamlcast, @rodrigokono e @robertos_br

Mais notícias em breve.

     Primeiro crie uma aplicação em WPF e adicione um UserControl com o nome de UserControlCheckBox.xaml, modifique a altura e o tamanho para 100: Height=”100″ Width=”100″ e altere o fundo do layout GRID para “Black”. Dentro do layout GRID adicione uma Ellipse com o tamanho e altura de 20.

     Agora vamos criar um Style herdando as propriedades de um objeto CheckBox, selecione a Ellipse com o botão direito do mouse e clique em Make into Control… conforme a figura abaixo:

     Repita o processo para o evento Unchecked, neste momento temos o trigger conforme a listagem abaixo:

     Duas Storyboards foram criadas, para  trocar a imagem quando o CheckBox é acionado adicione o evento Completed na Storyboard OnChecked1 e adicione o código C# abaixo:

ImageBrush brush = (ImageBrush)this.Resources["imgb"];
Image image1 = new Image();
brush.ImageSource =
new BitmapImage(new Uri(“luz_apagada.png”, UriKind.Relative));

    Repita o processo no evento Completed da Storyboard OnUnchecked1 mudando somente a imagem:

brush.ImageSource = new BitmapImage(new Uri(“luz_ligada.png”, UriKind.Relative));

     Para finalizar o tutorial vamos animar as propriedades Opacity e Radius para simular uma luz no CheckBox inserindo um novo efeito ao controle, na Storyboard OnChecked1 adicione o código:

     E adicione o código abaixo na Storyboard OnUnchecked1:

     Adicione uma Ellipse entre o GRID Layout e o CheckBox e utilize o efeito BlurEffect que vai dar o efeito de luz no CheckBox:

    Agora é só adicionar o UserControl em seu projeto e testar.

Código fonte do tutorial : Clique aqui
Expression Blend 3 / Visual Studio 2008

Seguimos então com a análise deste problema: como escolher entre duas interfaces que dão suporte à mesma tarefa? Para quem não está acompanhando, as interfaces em questão são mostradas nas figuras 1 e 2.

Figura 1, à esquerda. Interface com drag n´drop. O usuário arrasta um conceito para a área ao lado da tree, e o local (y) onde ele largou o conceito define o quanto o material está associado ao conceito.

Figura 2, à direita. Interface com HSlider. O usuário seleciona um item na Tree. Na tela ao lado, há uma HSlider, que o usuário usa para dizer o quanto o conceito se asssocia com o material. Na Tree se podem ser, ao lado dos conceitos que estão associados com o material, o quanto (%) o conceito se associa ao material.

Estas interfaces foram avaliadas utilizando um conjunto de heurísticas  e o KLM. Estes são dois métodos que pertencem mais ao design que ao desenvolvimento, e que são usados para informar a escolha. No entanto, eles não consideram a complexidade da implementação, que é um fator determinante na escolha. Por este motivo, pedi para alguns colegas avaliarem as duas interfaces e dizerem o quanto uma interface é mais trabalhosa que a outra. Além disso, pedi que, se possível, comentassem cada uma das propostas.

Pedi que a todos os avaliadores que considerassem a implementação na mesma linguagem de programação (AS3, usando Flex). Todos têm pelo menos 2 anos de experiência com a linguagem, e todos são desenvolvedores reconhecidos (à exceção de um, todos são moderadores de listas com mais de 2000 membros). Eles avaliaram o seguinte cenário:

/*******************************************************
CENÁRIO
O projeto é uma materioteca, usada para auxiliar no processo de seleção de materiais. Será usada por designers, arquitetos e eventualmente, por engenheiros.
A tela em questão é para associar conceitos a um dado material que está sendo criado pelo administrador da materioteca (você :0). Estes conceitos são palavras, e são características abstratas do material. Pense que isso pode ser importante para um designer fazer sua escolha. Exemplos de conceitos podem ser: inovador, sensual, moderno, vibrante, vulgar, barato etc.
Você não irá criar conceitos, apenas usar os que estão disponíveis.

As implementações possíveis estão nos pngs anexos*
*******************************************************/

O resultado até agora é:

• Desenvolvedor 1 -> Interface A(Drag n´ Drop)=2 * Interface B (HSlider)
• Desenvolvedor 2 -> Interface A(Drag n´ Drop)=10 * Interface B (HSlider)
• Desenvolvedor 3 -> Interface A(Drag n´ Drop)=4 * Interface B (HSlider)
• Desenvolvedor 4 -> Interface A(Drag n´ Drop)=3 * Interface B (HSlider)

Além disso, alguns ainda enviaram comentários:

Desenvolvedor 1

• “Preferiria implementar a segunda forma, acho que é bem mais intuitiva para o usuario”.
• “[...] Ok… pode ser até mais dificil de implementar, mas a real importancia não é a dificuldade da implementação mas a experiencia do usuario em usar essa app”.

No email de resposta ainda haviam exemplos de interfaces que suportam a mesma tarefa, referidos pelo Desenvolvedor 1 como sendo de pior qualidade. Os dois exemplos estão mostrados abaixo.

—————————————————–
| Conceito A      |  <combo box de %> |  Selecione o valor percentual de associação
—————————————————–
| Conceito B      |  <combo box de %> |
—————————————————–
| Conceito G      |  <combo box de %> |
—————————————————–

Ou pior ainda… :
——————————————————————
| Conceito A      |  <textInput / NumericStepper> |  Digite o valor percentual de associação
——————————————————————
| Conceito B      |  <textInput / NumericStepper> |
——————————————————————
| Conceito G      |  <textInput / NumericStepper> |
——————————————————————

Desenvolvedor 3

• “Então, olhando as duas opções, a primeira usando um HSlider me parece muito ‘tradicional’, mais fácil de manipular mas mais difícil de analisar o todo. Gosto mais da segunda opção, apesar de mais complexa para o usuário final manipular”.
• “Obviamente que o usuário final não está tão acostumado com o drag and drop nos softwares como ele usa no sistema operacional, mas dá uma dimensão muito melhor, acredito até que ele acharia ruim essa opção em um primeiro momento, mas depois de começar usar se sentiria mais confortável em poder analisar todos os conceitos de determinado material de uma única vez.”
• Em uma conversa via MSN, este desenvolvedor sugeriu uma “solução intermediária”, na qual ao arrastar o conceito para o Canvas, uma janela é criada, com uma barra deslizante, usada para definir a associação ao conceito.

Desenvolvedor 4

• “Usaria o hslider/vslider em vez do cenário do canvas”.
• “Bem, colocaria os itens em ordem decrescente de %, facilitando assim ao usuário a associação visual.”**
• “Uma sugestão também é em vez de usar um slider, usar um itemRenderer que mostre um NumericStepper. Na minha opinião usaria o NumericStepper, porque daria menos trabalho sem perder a funcionalidade e agregando maior agilidade para o usuário. Usando NumericStepper como itemRenderer acredito que levaria menos tempo ainda que o slider, talvez 0.6x, além que área que deixaria de ser usada pelo slider poderia ser usada para outra coisa.”

Dois desenvolvedores manifestaram preferência pela interface com Drag n´Drop, um pela interface com HSlider e um não manifestou preferência. No entanto, todos afirmaram que a interface com Drag n´Drop é mais demorada.

Assim como as avaliações anteriores, estes pareceres não foram conclusivos em favor de nenhuma das opções, pois, mesmo que dois desenvolvedores tenham manifestado clara preferência pela interface com Drag n´Drop, é preciso avaliar se o tempo de implementação é um fator importante.

Cada vez mais acho que vou precisar de um protótipo para dar o veredicto :0)

Acompanhe!

PS: Se você também quer mandar sua estimativa e seus comentários, comente aqui ou mande por email. Vou incorporar no post.

* As imagens do início deste post, com descrições sobre detalhes da implementação e sugestões para os algoritmos.

** No HSlider

Realizar uma avaliação através de heurísticas significa seguir uma estratégia baseada em parâmetros. Assim, para realizar uma avaliação heurística, deve-se escolher este conjunto de parâmetros. Esta é a grande diferença entre guidelines e heurísticas, pois as primeiras são regras para resolver um problema, como se fossem uma receita para construir uma boa interface. As segundas, por sua vez, são mais flexíveis, permitindo que o designer encontre sua própria solução. Provavelmente o conjunto mais conhecido seha o de Molich e Nielsen (1990)*, que originalmente continha nove heurísticas,  atualizadas em 1994*, contando dez heurísticas. Para chegar ao conjunto original, Molich e Nielsen realizaram uma pesquisa com 77 designers e programadores, da indústria e acadêmicos, investigando se eles conseguiam encontrar problemas de usabilidade em uma interface.  Sobre a avaliação com heurísticas, Nielsen e Molich afirmam que o sucesso da análise está intimamente relacionado à qualidade do avaliador, e profissionais experientes e com formação em ergonomia têm melhor performance que especialistas em computação. Além disso, afirmam que algumas interfaces são mais difíceis da avaliar heuristicamente do que outras, e que esta diferença acentua ainda mais a importância de avaliadores experientes. Também afirmam que este tipo de avaliação não deve ser feito por um único avaliador (recomendam de três a cinco profissionais). Ainda citam algumas vantagens do uso deste método: é rápido e barato; é fácil motivar a equipe a conduzir um experimento deste tipo e pode ser usado desde cedo no processo de desenvolvimento.

A lista atualizada (a de 1994) está abaixo**:

1. Visão do estado do sistema: O sistema deve sempre manter os utilizadores informados acerca do que é que se está a passar através de feedback apropriado.
2. Ligação entre o sistema e o mundo real: O sistema deve falar a linguagem dos utilizadores, usar palavras, frases e conceitos familiares para o utilizador.
3. Liberdade e Controle: Pode acontecer que o utilizador escolha alguma função por engano e necessite de cancelar ou simplesmente ?Sair sem gravar alterações?. Sempre que possível deve implementar-se undo e redo.
4. Consistência e Standards: Devem seguir-se convenções, normas definidas e normas de facto estabelecidas, de maneira a que o utilizador se sinta familiarizado com a forma de interagir com o sistema em qualquer parte deste.
5. Prevenção de Erros: Melhor do que boas mensagens de erro é o desenho cuidado que previne que esses erros aconteçam. Não deixar que seja possível cometer o erro.
6. Reconhecer em vez Recordar: Minimizar a necessidade do utilizador ter de se lembrar de algo (ex: qual a tecla para ver o documento X), disponibilizando visualmente objectos, opções ou acções. Não deve ser necessário decorar nada de uma janela para outra. As instruções devem estar acessiveis fácilmente e sempre que necessário.
7. Flexibilidade e eficiência na utilização: Teclas de atalho (que normalmete não são usadas por utilizadores novatos). Estas poderão aumentar a velocidade de interacção para utilizadores mais experientes. Permitir aos utilizadores criar atalhos para acções mais frequentes.
8. Design Simples: As janelas não devem conter informação irrelevante ou raramente necessária. Todas as informações extra disponibilizadas, competem com a informação relevante, diminuindo a sua visibilidade.
9. Ajudar os utilizadores a reconhecer, diagnosticar e recuperar dos erros: As mensagens de erro devem ser expressas numa linguagem comum (sem códigos). Devem indicar precisamente qual o problema e a sugestão para a sua solução.
10. Ajuda e Documentação: Mesmo que seja melhor que o sistema possa ser usado sem documentação, esta pode ser necessária. Deve ser possível pesquisar qualquer informação. Focar a ajuda mediante a tarefa que o utilizador pretende executar. A documentação deve ser simples (passo-a-passo) e não extensa.

Segundo Stanton e Young (2003), a avaliação através de heurísticas é um método extremamente simples e rápido de aplicar, podendo ser empregada em qualquer estágio do desenvolvimento do produto. Os autores recomendam apenas que o avaliador esteja familiarizado com o produto em análise. Por outro lado, os autores ressaltam a carga subjetiva da análise, o que resulta em baixa confiabilidade: avaliadores diferentes produzem resultados diferentes. Este não é o caso do KLM (veja o post sobre KLM aqui), que, segundo Stanton e  Young tem alta confiabilidade.

Porém, a avaliação heurística tem uma funçao diferente da avaliação com o KLM: ela informa a qualidade da interface de uma forma mais geral, abrangendo outros aspectos além do tempo de execução da tarefa. Desta forma, ela se contitui numa referência importante para a escolha entre duas interfaces. Sendo assim, as interfaces mostradas nas figuras 1 e 2 serão submetidas à avaliação.

Figura 1. Interface com drag n´drop. O usuário arrasta um conceito para a área ao lado da tree, e o local (y) onde ele largou o conceito define o quanto o material está associado ao conceito.

Figura 2. Interface com HSlider. O usuário seleciona um item na Tree. Na tela ao lado, há uma HSlider, que o usuário usa para dizer o quanto o conceito se asssocia com o material. Na Tree se podem ser, ao lado dos conceitos que estão associados com o material, o quanto (%) o conceito se associa ao material.

A avaliação das duas interfaces é apresentada nas tabelas 1 e 2. Para cada item do conjunto de heurísticas foi atribuído um valor de -3 a 3. Ao final, os valores são somados para gerar uma “pontuação”.

Tabela 1. Avaliação da Inteface A, que sugere a implementação de um comportamento de Drag n´Drop.

Tabela 2. Avaliação da Inteface B, que sugere a implementação de uma barra deslizante.

A pontuação das interfaces A e B foi, respectivamente, 14 e 12. Os itens em que a interface A teve desempenho melhor foram “Visão do estado do sistema” e “Reconhecer em vez Recordar“. Já a interface B se saiu melhor no item “Consistência e Standards“. Como a diferença – mais uma vez – foi pequena (cerca de 15%) em favor da interface A, o teste com usuários e um protótipo funcional é recomendado.

Acompanhe!

* MOLICH, R.; NIELSEN, J. Improving a Human-Computer Dialogue: What designers Know About Traditional Interface Design. Communications of the ACM, v. 33, p. 338-342, 1990.

* Para ver as dez heurísticas: http://www.useit.com/papers/heuristic/heuristic_list.html

** Tradução de bartolom.eu

*** Stanton, N. & Young, M. (2003). A Guide to Methodology in Ergonomics: Designing for Human Use. 2nd edition, Taylor & Francis. ISBN: 0-7484-0703-0

Faça um designer feliz!!! Faça um click-test, dizendo quais as áreas de um layout são mais proeminentes. O tempo para clicar nas áreas que “se destacam” é de 5 segundos.

E faça um designer feliz!!!!

http://www.fivesecondtest.com/

This post is in portuguese only because you can find plenty of information on KML on the internet.

O Keystroke Level Model (ou KLM) é uma forma rápida e segura* de avaliarmos diferentes interfaces que suportam a mesma tarefa. Este método irá retornar um valor que corresponde à predição de tempo que um usuário que não erra leva para realizar a tarefa com a interface em questão.

Minha intenção não é ensinar a usar o KLM. Para isso, você deve buscar outras fontes, como por exemplo este do David Kieras, que é muito didático.  O que eu pretendo com este post é comparar alguns interfaces que suportam a mesma tarefa, e usar o fator “tempo” como um dos parâmetros para informar minha decisão sobre qual delas eu devo usar.

A tarefa em questão é associar um conceito a um material, num espaço de criação/edição de materiais, em uma biblioteca virtual de materiais. Cada conceito pertence a uma e apenas uma biblioteca de conceitos. Além de associar o conceito a um material, o usuário deve especificar o quanto (em termos numéricos), esteb conceito está associado ao material que está sendo criado/editado. Por exemplo: o conceito “Inovação” está relacionado “87%” com o material  “Polietileno”.

As interfaces em julgamento são:

Figura 1. Interface com drag n´drop. O usuário arrasta um conceito para a área ao lado da tree, e o local (y) onde ele largou o conceito define o quanto o material está associado ao conceito.

Figura 2. Interface com HSlider. O usuário seleciona um item na Tree. Na tela ao lado, há uma HSlider, que o usuário usa para dizer o quanto o conceito se asssocia com o material. Na Tree se podem ser, ao lado dos conceitos que estão associados com o material, o quanto (%) o conceito se associa ao material.

Estou assumindo que o usuário é novato no sistema (precisa refletir sobre as ações e precisa procurar os elementos na interface). Vamos aos cálculos**:

Interface Drag n´drop – Tool tip aparece logo que o conceito está sobre a área – Tree aberta sem rolagem

TOTAL = 7M + 2P + 2B = 10.8 segundos

Ainda para esta mesma interface, temos que considerar que o usuário decide mudar o valor da associação. Neste caso, ficaria assim:

TOTAL = 6M + 1P + 2B = 8.5 segundos

Interface HSlider – Tool tip aparece sempre na HSlider – Tree aberta sem rolagem

TOTAL = 6M + 1P + 4B = 11 segundos

Ainda para esta mesma interface, temos que considerar que o usuário decide mudar o valor da associação. Neste caso, ficaria assim:

TOTAL = 6M + 1P + 2B = 9.7 segundos

Concluí que com a interface com Drag n´Drop leva-se cerca e 7% menos tempo que com a interface HSlider. Eu nao acho que esta diferença de tempo seja significativa, por isso precisaria de mais critérios para decidir. Neste ponto, eu recomendaria um teste com (5) usuários. Acompanhe aqui para saber como foi.

* Aqui neste (excelente) livro, você encontra uma breve descirção de diversos métodos ergonômicos, além de uma avaliação de parâmetros como confiabilidade, rapidez no treinamento e na aplicação. Eu comprei e gostei :0) Ah, e fiquei sabendo neste blog: “o design e a ergonomia”

Salvendy, G., Stanton, N. & Young, M. (2003). A Guide to Methodology in Ergonomics: Designing for Human Use. 2nd edition, Taylor & Francis. ISBN: 0-7484-0703-0

** O KLM prescreve operadores (tanto a nível operacional quanto mental) e tempos para cada um deles. Para ver como cheguei a estes resultados, veja o artigo do David Kieras. Estes “tempos” foram medidos em experimentos em laboratório. Para ver mais detalhes, veja o original: Card, S.K.; T.P. Thomas & A. Newall (1983), written at London, The Psychology of Human-Computer Interaction, Lawrence Erbaum Associates, ISBN 0-89859-243-7