DESIGNLAB

Design, Tipografia e Multimédia.

Archive for Web

UX+HCI Open Seminars: Bieke Zaman

Bieke Zaman @ UA

Bieke Zaman @ UA

Hoje à tarde (quarta-feira, dia 30), no âmbito do Mestrado em Comunicação Multimédia, a investigadora Bieke Zaman, da Universidade K.U. Leuven da Bélgica apresentou uma conferência com o título: From Human Computer Interaction to Player-Computer Interaction: The evolution of HCI and games research. Para além de uma presença muito simpática, a conferência foi bastante interativa e o tempo passou a voar…

[update: não percam a conferência de David Geerts, hoje, quinta-feira dia 30 à tarde. Até porque não sei se vai ser possível haver um stream como ontem]

A conferência começou com uma breve incursão (interativa com o público) sobre as (noções e) definições de Human-Computer Interaction (HCI) e User Experience (UX). No final, acabou um pouco mais curta do que esperava (passando apenas brevemente nas estratégias de gamification).

Mas a conferência não deixou de impressionar. Para além de um rescaldo dos principais conceitos, Zaman brindou-nos com uma abordagem muito interessante à reflexão sobre as últimas décadas de Design de Interação e sobre as abordagens de Design Participativo.

Como a imagem deste artigo revela (num breve pormenor), Bieke apresentou um diagrama (desenvolvido por ela) sobre a  evolução do conceito, investigação e desenvolvimento sobre HCI ao longo dos últimos 30 anos.

Organizou esta noção através de uma framework que organiza as áreas de interesse/de investigação que se envolveram com o HCI em três vagas (do original waves). Áreas como as Ciências Cognitivas (denominada de Primeira Vaga) através das experiências controladas em laboratórios de interação. Seguindo-se (e acrescentando) as Ciências Sociais (a Segunda Vaga) através de métodos etnográficos e da fenomenologia. E por fim (disse Bieke, em tom de interrogação), destaca o envolvimento das Artes e Humanidades neste domínio (a Terceira Vaga), através dos estudos críticos e da interpretação.

[The i]ncreasing importance of aesthetics in technology.

Um dos primeiros aspetos que é interessante observar nesta framework, é a alteração da da importância e do envolvimento das ciências humanas e sociais, e das artes e design, no desenvolvimento e estudo de soluções de HCI. E no final da apresentação da framework deixou em tom de provocação:

What will be the 4th pillar, the 4th wave?

Outro aspeto que se destacou no discurso e apresentação de Zaman, foi a passagem da observação em laboratório para os métodos mais contextuais, de observação situada e da importância do envolvimento dos utilizadores finais no processo de desenho e desenvolvimento da soluções—abordagens de User-Centered Design e de Participatory Design. No entanto, a autora denotou uma definição muito particular desta abordagem. Se as minhas notas não me atraiçoam (por favor confirmem nos artigos dela), Bieke considera esta abordagem da seguinte forma:

Participatory Design, as involving users in Design. It’s more like a moral stance in order to empower the people for whom you are designing for…

Apesar de estar fora do contexto, e de ela realçar a crescente importância de envolver os utilizadores finais (e todos os stakeholders) no processo, Bieke denota que o processo de participação deve ser gerido com cuidado. Consiste mais numa abordagem moral e social do que propriamente uma forma de verdadeiro co-design. Isto é, os participantes não vão todos desenhar. Mas o seu input é valioso para a definição e construção do desenho: “Empower in order ot facilitate knowledge creation… It’s really complex”

Não é um processo fácil. Aliás, Bieke destacou isto várias vezes. Não é fácil!

In theory it’s wonderful. In practice it’s difficult. It is really difficult. But it’s not because it’s difficult that we should avoid it.

Ela admite que o processo participativo é difícil, ou virtualmente impossível quando se envolve todos os stakeholders—é impossível envolve-los e acolher a participação de todos de forma positiva.

Na segunda parte deu mais enfoque na layer atual de Gamification para abrir o tópico de “What’s Next?…”

A direção que Bieke imprimiu à conferência é que o tempo do estudo da interação Humano-Computador já passou das máquinas, para a camada de interação social—o que é que nós, pessoas, podemos fazer com as máquinas. Citando e desafiando-nos todos a ver a conferência da TED de Jane McGonigal, sobre como é que podemos usar a tecnologia para resolver os problemas reais do mundo?

How can we design for a more meaningful interaction, achieving a positive… in people’s lives

Terminou a conferência com um excerto de um vídeo ainda neste tópico—Connecting (disponível no Vimeo)

Portanto, resumindo a experiência, para além de um par de horas muito bem passadas (em boa companhia de uma audiência porreira!) Zaman deixou-nos a pensar sobre como e sobre o que devemos valorizar no estudo de HCI dos próximos 4, 8 anos. Isto é, tal como Jason Pamental referiu (numa outra conferência), nos últimos jogos Olimpicos não havia o iPad. E nos anteriores não havia o iPhone… hoje já temos iWatch[es]… o que é que vai aparecer [e mudar tudo] nos próximos jogos olímpicos? A que é que devemos prestar atenção e valorizar?

Eu sei que o meu telefone já tem mais um par de vídeos para ver assim que puder…


Notas finais:

As citações podem não corresponder ipsis verbis ao discurso de Bieke. Não se trata de livre adaptação, mas sim, apenas da falta de velocidade para tirar notas (tenho cada vez mais dificuldade em fazer multitasking…). Consultem o registo do stream no canal do Mestrado em Comunicação Multimédia: http://www.livestream.com/mcmm

Cartaz da conferência: http://www.slideshare.net/slideshow/embed_code/40776821)

Links do dia: alteração de estados com CSS

Há muito tempo que não faço esta rubrica aqui, mas com as aulas a acabar, posso dar-me ao luxo de voltar a ler as mais de 50 abas que tenho abertas no Firefox e descobrir coisas absolutamente deliciosas.

Uma destas coisas é este truque conseguido apenas com um pouco de imaginação e CSS: http://jsfiddle.net/DMNSn/

Simon Madine consegue mudar o aspeto (propriedades de CSS) recorrendo apenas a hiperligações, um pouco de lógica de Box model, e ao atributo “:target”. A solução é assustadoramente simples e absolutamente deliciosa! Permite inúmeras aplicações em layouts interativos, exploratórios, jogos… Ah!… já disse que ele não usa Javascript?…

Via Creative Bloq: http://www.creativebloq.com/css3/tips-breathe-new-life-your-css-61411880

Webinar Adobe InDesign CC

Screen Shot 2013-07-07 at 7.03.48 PM

Imagem retirada do site da Adobe

Para quem quiser  investir no Design Editorial e na publicação digital, recomendo o próximo webinar gratuito da Adobe: https://www1.gotomeeting.com/register/145221617?et_mid=626755&rid=3807420

Na próxima terça-feira, 19:00

Links do dia: Hoje?

Here is today (pormenor)

Here is today (pormenor)

Um site, ou melhor uma aplicação interativa online, que remete para o “Powers of 10” de Charles e Ray Eames. De uma simplicidade e elegância que não fica nada a dever ao primeiro: HERE IS TODAY.

Via Sidebar

Links do dia: Gráficos, Design e Criatividade

Website da Ideo

Mais uma edição dos cronologicamente erráticos links do dia!

O primeiro e merecido link é para o Podcast da Debbie Millman – Design Matters. Uma entrevista deliciosa com Tim Brown onde se discute o (controverso?) conceito de Design Thinking e a abordagem da IDEO. A propósito da discussão há muito iniciada (continuada, e continuada…) no blog Ressabiator, esta é talvez a posição mais interessante na definição de um Designer. Vale a pena ouvir: http://observermedia.designobserver.com/show_designmatters.html

Podcast 99% Invisible

Ainda no tópico dos Podcasts, o segundo link é dedicado a uma atividade de criação que gostava de experimentar – desenho e criação de selos – afinal de contas, pela descrição, um selo não é uma pintura pequena (como muita gente pode pensar) mas um autêntico processo de criação e design. O Podcast é o 99% Invisible – um podcast com uma produção áudio excelente: http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewPodcast?id=394775318

Everything is a Remix (Episódio 1 @ Vimeo)

Já que estamos no tópico de criatividade. Um link partilhado no Facebook pelo Daniel B.: Everything is a remix: a serie de 4 episódios agora esta completa. Episódio 1 (e restantes links): https://vimeo.com/14912890

Um artigo excelente para quem quer começar a desenhar gráficos AKA visualização de informação, com exemplos do Nicholas Felton, Casey Reas e Ben Fry. Sem esquecer a incontornável referência ao Edward Tufte. Uma leitura rápida e “recheada”: http://lab.softwarestudies.com/2012/02/5-minute-guide-graphic-design.html Via goole+ Lev Manovich

Poster do ENED @ Átrio do DeCA

Um destaque bem merecido para o Encontro Nacional de Estudantes de Design (ENED). Para além de me ter chamado a atenção da coincidência do nome e do logótipo com a nossa conferência, o programa promete: http://enedesign.net/

Raphael @ Smashing Magazine

Uma outra entrada que tem sido alvo recorrente neste blog é a análise de ferramentas criativas (neste caso de programação gráfica). Uma adição à lista que tenho que fazer neste post antigo é o do Raphael. Vista e muito bem documentada no “The future of coding”: http://coding.smashingmagazine.com/2012/02/22/web-drawing-throwdown-paper-processing-raphael/

Por fim e não menos impressionante é a última jogada da Canonical – transformar o nosso dispositivo móvel (AKA telefone, tablet) num ultra portátil em que só precisamos de uma dock: http://www.ubuntu.com/devices/android

Boas práticas para a edição de Blogs

Pormenor da estratégia editorial de publicação (in Tidwell, 2009: 416)

Este texto resume um conjunto de boas práticas para a redação de Blogs. Surge em resposta ao desafio do Prof. Hélder Caixinha, no âmbito das aulas de  Projeto, e em resposta às necessidades de outras disciplinas como Multimédia Editorial, onde parte do trabalho dos alunos passa por criar um blog de documentação de desenvolvimento e de acompanhamento dos projetos.

Por uma questão de conveniência, este resumo está organizado nos seguintes temas:

Deve ser usado como um manual de linhas orientadoras para a redação e manutenção de um Blog. Não como um manual de regras obrigatórias.

Cada autor deve refletir sobre estes princípios e adapta-los da melhor forma ao seu Blog.

Uma vez que se trata de um resumo, os assuntos podem ser consultados de forma mais completa e ilustrada nas referências fornecidas. Conhecem outras , ou melhores referências? Deixem-me um comentário.

Conteúdo

Anatomia de um Blog (About.com)

O conteúdo refere-se às entradas cronológicas (“posts”), páginas de informação estática, ou pequenas secções (como as “sidebars” do Blog).

As entradas devem fornecer o contexto necessário de forma curta. Devem filtrar a informação desnecessária e oferecer hiperligações para informação adicional (fontes originais, textos longos, outras entradas, sites, ou blogs com informação adicional).

Devem procurar uma redação correta, sem erros, com princípio, meio e fim.

Agrupar a informação semelhante em pequenos segmentos, grupos, ou unidades, com uma ou duas ideias por cada.

As entradas, ou secções, devem possuir títulos significativos, uma breve descrição (se possível), data (de redação e de atualização), autor(es), e estar categorizadas com etiquetas e categorias significativas.

Se o texto for longo, podem escrever um resumo prévio, ou dividir em múltiplas entradas.

As entradas mais antigas devem ser atualizadas, editando-as, comentando-as, ou ligando-as às entradas mais recentes, ou a outras fontes de informação (internas, ou externas).

Estrutura

Exemplo de um Feedreader (NetNewsWire)

A estrutura refere-se ao tipo de informação, a sua marcação, as suas funções e o uso pretendido (interação) no Blog.

Devem usar estilos (HTML) “standard” para hierarquizar a o texto (H1, H2, Parágrafo, etc.). Bem como estruturas formais de texto tradicional (itálicos para destacar, listas de balas, numeradas, etc.).

A formatação visual (tamanho, cor, etc) deve ficar a cargo do tema/CSS do Blog, ou do Feedreader do utilizador final.

Deve-se fornecer uma opção de pesquisa dentro do próprio Blog.

As hiperligações para os conteúdos devem ser simples, evitando alterações, ou ligações quebradas. Tentar fornecer as hiperligações por extenso, sempre que possível.

Verificar como os conteúdos estão a ser indexados nos motores de busca e corrigir a meta-informação de acordo.

Ritmo e edição

Exemplo de painel de objetivos editoriais (WordPress.com)

Um autor de um blog é um como um editor tradicional. Deve possuir uma agenda de edição e uma estratégia de publicação.

Deve-se optar por um mínimo de um entrada semanal, e um máximo de uma entrada diária. Publicar de forma regular, agendando as entradas, ou criando uma agenda de entradas temáticas, se possível.

Evitar o “overshare”.

Agilizar o ritmo e interligação das entradas do Blog com outros meios de publicação e partilha social como o Twitter, ou o Facebook, como formas complementares de publicação e atualização de conteúdos mais curtos e imediatos. Ou de conteúdos de outra natureza, como os canais de Vídeo, ou Podcasts.

Design e ilustração

Seleção de temas visuais (WordPress.com)

O Blog deve ter um tema visual apelativo, relacionado com o conteúdo do Blog, sem perder de vista a funcionalidade (design funcional, ou minimalista).

Sempre que possível, devem ilustrar as entradas com imagens, vídeos, ou outro elemento multimédia, mantendo a dimensão (Kb) da página baixa.

Créditos e hiperligações

Exemplo de licenciamento disponível (Creative Commons)

Todos os materiais utilizados (textos, imagens, vídeos, etc) devem ser identificados com legendas, referências no texto e creditados corretamente.

O Blog deve conter a informação de “copyright” sobre o conteúdo próprio.

A privacidade dos autores deve ser protegida, mas ao mesmo tempo fornecer o máximo de informação sobre o Blog, sobre os autores, ou sobre o conteúdo, de forma a obter credibilidade (tipicamente, na página “About”).

Deve-se fornecer uma forma de contacto (direto) com o(s) autor(es).

Deve-se fornecer formas de ligação social (“feeds”, subscrições por email, etc.) de forma a que seja fácil os leitores tornarem-se “seguidores”.

Aproveitar a natureza de rede da Web para embutir conteúdo no Blog, ou estabelecer hiperligações nos conteúdos utilizados, abreviando as entradas e fornecendo informação em profundidade.

Estabelecer um Blogroll que vos ajuda a identificar e a serem identificados pelos vossos pares.

Feedback e estatísticas

Exemplo de estatísticas fornecidas pelo WordPress.com

Os Blogs possuem vários mecanismos de validação social visível e invisível para os leitores. Enquanto autores, estes mecanismos são fundamentais para entender e fomentar a leitura do Blog.

Mecanismos de validação e partilha social

Encorajar a dinamização e participação no Blog (de amigos, colegas, docentes, orientadores, etc.), através da disponibilização e manutenção dos comentários, formas de avaliação (votação, “ratings”, “likes”, etc.) e de mecanismos de partilha social online.

Dispor de uma medição estatística que permita recolher dados sobre os utilizadores, sobre o conteúdo consultado e sobre a navegação. Melhorar o Blog com esta informação.

Referências

Referências adicionais "obrigatórias"

BARBOSA, E.; GRANADO, A. – Weblogs: Diário de bordo. Porto: Porto Editora, 2004.  ISBN 972-0-45252-8.

BLOOD, R. – The Weblog Handbook: Pratical advice on creating and maintaining your blog. Cambridge: Perseus Books, 2002.  ISBN 0-7382-0756-X.

BORDEAU, J. – Blogging For Web Designers: Editorial Calendars and Style Guides [em linha]. Smashing Magazine. [Consult. 2012-02-08]. Disponível na Internet: <URL: http://www.smashingmagazine.com/2010/08/30/the-importance-of-consistency-using-editorial-calendars-and-style-guides>.

CRUMLISH, C.; MALONE, E. – Designing Social Interfaces: Principles, Patterns, and Practices for Improving the User Experience. Sebastopol: O’Reilly Media, 2009.  ISBN 978-0596154929. Disponível na Internet: <URL: http://www.designingsocialinterfaces.com>.

FRANCO, G. – Como escrever para a Web [em linha]. S. l.: Knights Center fo Journalism, s. d. [Consult. 2012-02-08]. Disponível na Internet: <URL: http://knightcenter.utexas.edu/ebook/how-write-web>.

TIDWELL, J. – Designing Interfaces: Patterns for Effective Interaction Design. Sebastopol: O’Reilly, 2010.  ISBN 978-1-449-37970-4. Disponível na Internet: <URL: http://designinginterfaces.com>.

Exo Typeface

Exo Typeface no Google Webfonts

Só uma entrada muito rápida para dizer que a fonte Exo, do Natanael Gama (que apoiei orgulhosamente no Kickstarter), já se encontra disponível na Google Webfonts: http://www.google.com/webfonts/specimen/Exo

Vamos lá por a fonte em uso!…

Follow

Get every new post delivered to your Inbox.

Join 134 other followers

%d bloggers like this: