Recco: MSc Dissertation Final Presentation

Recco RecuPeração e Criação de Comics Online Ricardo Abreu Lopes Fevereiro 2009 Wednesday, February 18, 2009

comics e web? Wednesday, February 18, 2009

sucesso na partilha e distribuição Wednesday, February 18, 2009

comunidade web comics: encurta a distância entre autores e leitores Wednesday, February 18, 2009

facilidade na criação por amadores Wednesday, February 18, 2009

Mas criar com facilidade é suﬁciente? Wednesday, February 18, 2009

Não. As soluções actuais para criar comics online restrigem a interacção com o utilizador... HyperComics[Games07] Wednesday, February 18, 2009

... não existe ﬂexibilidade para criar, transformar e reutilizar livremente Wednesday, February 18, 2009

Os comics criados são visualmente simples sem expressividade Wednesday, February 18, 2009

Objectivos Queremos aproximar web comics ao formato tradicional criação confortável e sem limitações resultados visualmente ricos e complexos Wednesday, February 18, 2009

Mas queremos introduzir uma interacção mais rica e ﬂexível automatizar processos de criação e edição aumentar eﬁciência assistir o utilizador na repetição de elementos Wednesday, February 18, 2009

Para tal, estudámos como outros criam comics Em papel no computador Wednesday, February 18, 2009

Em papel, comics são linguagem visual bastante rica Wednesday, February 18, 2009

em papel, as convenções na criação de comics levam à repetição de elementos visuais Wednesday, February 18, 2009

StripGenerator[Studios07] No computador, a técnica mais frequente para criar comics é a recombinação de imagens Wednesday, February 18, 2009

ComicKit [Williams05] Wednesday, February 18, 2009

Read Write Think [Think07] Wednesday, February 18, 2009

com esta técnica, elementos criados não podem ser reutilizados... Wednesday, February 18, 2009

Alderman[Alderman06] ComiKit[Williams05] Gnomz[Cheung06] ... e as tiras criadas têm fraca complexidade visual Wednesday, February 18, 2009

Comics Sketch[inEvo08] mas soluções com desenho livre estimulam utilizadores a criarem comics mais complexos Wednesday, February 18, 2009

a nossa solução é uma nova abordagem à criação de comics online Wednesday, February 18, 2009

interacção caligráﬁca para desenho livre Wednesday, February 18, 2009

edição rica com transformação de desenhos Wednesday, February 18, 2009

desenho assistido e sugestões geométricas Wednesday, February 18, 2009

recuperação caligráﬁca de desenhos anteriores Wednesday, February 18, 2009

mecanismo de recuperação por atalhos caligráﬁcos Wednesday, February 18, 2009

Arquitectura da aplicação web que concretiza a nossa solução Client Web Application: Editor Comics Application Interface Editor Module Context Layer Canvas User Menu Editor Module Manager Editor Module Expectation List Editing Tool Panels List RETRIEVAL EVENTS Server: Retrieval Module Comics Retrieval Services SVG Indagare Library Wednesday, February 18, 2009

Arquitectura do Módulo Editor, orientada a Componentes Panels List Canvas Canvas Canvas Canvas User Actions Canvas Context Event data binding updates model and view Menu Controller Context Canvas Change View Event model updates view command User Actions instructs update Properties on model Model View Model Watchers User Actions property change triggers editor event Canvas Event data binding updates values in properties model command replaces drawing with suggestion Group Tool Layer Text Tool UI Zoom Tool Manager Style Tool updates Controller Model suggestions - color - width - ... model updates view User Actions Edition Expectations User Actions View Components List User Actions Wednesday, February 18, 2009

Editor suporta modelo rico de criação de comics abordagem em que combinamos múltiplas técnicas de edição de desenhos Wednesday, February 18, 2009

Tela de Desenho desenho livre transformação de elementos editor SVG Wednesday, February 18, 2009

Menu de Contextos de Edição desenho acções zoom texto recuperação Wednesday, February 18, 2009

Gestor de Camadas Visuais distribui desenhos por camadas sobrepostas manipulação de camadas e respectivos desenhos Wednesday, February 18, 2009

Fila de Expectativas reconhecimento e sugestão de formas reconhecimento e execução de acções mostra resultados de recuperação Wednesday, February 18, 2009

Lista de Painéis contém a tira de comics manipula vinhetas actualiza e é actualizado por Tela de Desenho troca de dados SVG Wednesday, February 18, 2009

Recuperador suporta mecanismos de pesquisa e reutilização de elementos anteriores através de interacção caligráﬁca Wednesday, February 18, 2009

Porquê recuperação caligráﬁca? Utilizadores esboçam para desenhar e recuperar Wednesday, February 18, 2009

Figura 6.7: Interface do motor de busca Indagare - p´gina de resultados. a õ obtidos atrav´s de uma chamada ass´ a e ıncrona ao servidor, utilizando o desenho seleccionado como Utilizámos trabalho anterior na nterroga¸õ. Desta forma, o utilizador tem oportunidade de ver a informa¸õ referente ao desenho ca ca ue escolheu, sem ter que ficar ` espera da resposta do servidor. a recuperação caligráfia de desenhos .2.1.2 Backoffice ssim que come¸´mos a realizar opera¸˜es de manipula¸õ de dados, como a constru¸õ da base de ca co ca ca Wednesday, February 18, 2009

While these relationships are weakly discrim rotation and translation. 9 4 56 7 8 1 3 2 1 Fig. 3. Special polygons computed from shape. Fig. 3. Drawing and Top ombine these attributes with known commensurable values for simple convex rimitives, such as quadrilaterals and triangles. What is more important, using eometric features instead of polygon classiﬁcation, allows us to index and store Neste trabalho, desenhos e interrogações otentially unlimited families of shapes in a scalable manner. Our geometric description method uses a set of global geometric properties Since graph matching is apela sua NP-complete pr xtracted from drawing entities. We start the calculation of geometric features são descritos e comparados y computing the Convex Hull of the provided element, using Graham’s scan 9]. Then, we compute three special polygons from the convex hull: the Largest topology graphs topologia for searching similar draw geometria e rea Triangle and the Largest Area Quadrilateral inscribed in the convex hull ], and ﬁnally, the Smallest Area Enclosing Rectangle [12]. Figure 3 depicts an xample of polygons extracted from a irregular shape. graph spectra instead. For each topology gr Finally, we compute the ratios between area and perimeter from each special olygon. We experimentally evaluated several ratios, as described in detail in we compute descriptors based on its spect ], before we reach the set of features listed in Table 1. This set of features llow the description of shapes independently of their size, rotation, translation rWednesday, February 18, 2009 features can either be used to classify drawings or line type. This way, such

Contudo, decidimos estender este mecanismo com o conceito de atalho caligráﬁco Wednesday, February 18, 2009

Porquê? Observámos que utilizadores desenham poucas formas simples para pesquisar Wednesday, February 18, 2009

Mas querem o máximo de resultados que associam a essas formas Wednesday, February 18, 2009

Querem que a sua abstracção visual represente o signiﬁcado de todas as instâncias que esperam Wednesday, February 18, 2009

Tornámos explícita a criação de abstracções visuais, os atalhos caligráﬁcos Wednesday, February 18, 2009

Desenhos passam a ser também classiﬁcados por outro desenho adicional Wednesday, February 18, 2009

Criámos um mecanismo de sugestão de atalhos Os atalhos podem ser reutilizados para classiﬁcar outros desenhos Wednesday, February 18, 2009

Vantagens A pesquisa requer menos memória visual e está mais perto do que utilizadores já fazem Wednesday, February 18, 2009

desenhos classiﬁcados com o mesmo atalho formam grupos lógicos para o utilizador Wednesday, February 18, 2009

Os atalhos são uma extensão ao mecanismo tradicional. Solução continua válida para quem sente diﬁculdade nos atalhos Wednesday, February 18, 2009

Arquitectura do Módulo Recuperador Retrieval events created in editor invoke the appropriate service Query Retrieval Query Indagare Indagare Server Results Service PHP Extension Query Shortcut Suggestion Classify Service Results DrawingLib Classify Classify Classify Service Results function Classify shortcut SBR Classify shortcut Classify Shortcut function Service Retrieval Services writes or gets SVG Layer SVG Files Library Wednesday, February 18, 2009

Wednesday, February 18, 2009

Como avaliámos a nossa solução? Wednesday, February 18, 2009

Testes de utilizador com duas aplicações: ReCCO e Comics Sketch Wednesday, February 18, 2009

Lampâda no tecto, apagada Lampâda cresce um pouco Guião da Quantos Quantos engºs é que de Usabilidade TU Escadote são precisos para prancha a criar Escadote aberto achas? em trocar uma lampâda? e em pé Oh, depende... pé Pessoa 1 Cão pequeno Cão pequeno entra Lampâda 2 no chão Lampâda 2 no chão GRANDE PLANO Lampâda está GIGANTE Lampâda está muito maior Será que esta é sequer a pergunta certa? Nielsen tem 1 sobre lampâdas precisamos de fazer Cão no topo do escadote, 1 avaliação e a olhar para lampâda e 1 workshop? 1 relatório com brindes! Pessoa 2 Foco no topo entra do escadote Cão Pessoa 1 sim, o utilizador Escadote deitado, abandonado deseja ter luz? ponta da lampâda 2, esquecida Pedaços de vidro e lampâda chovem se soubéssemos mais cedo... Grande plano da lampâda a talvez na próxima release! explodir com um grande BAM! era demasiado tarde, nesta fase do desenvolvimento Grande plano em cão Wednesday, February 18, 2009

Medimos tempo de criação utilização de componentes de edição comportamento na recuperação satisfação Wednesday, February 18, 2009

8 participantes que correspondem ao perﬁl de utilizador desejado, divididos em 2 grupos Wednesday, February 18, 2009

+,--./quot;01234quot;+5-6quot; '#quot; -4789:quot;6;,<9=/quot;01234quot;+5-6quot; +,--./quot;01234quot;-65+quot; '!quot; -4789:quot;6;,<9=/quot;01234quot;-65+quot; " !quot;#$%&'#()*& %quot; $quot; #quot; !quot; Resultados para !quot; 'quot; #quot; (quot; $quot; )quot; %quot; *quot; +(),quot;-.& tempo de criação #%$ &'quot;&$ &'quot;($ &#$ &%$ !!quot;#$ !#$ !quot;#$%&!%'()&*#+,-& !%$ !%$ )#$ )%$ (#$ (%$ #$ %$ *+,-.$/012$ *+,-.$120/$ ./0$%&1quot;&23)+4(1%/quot;5& /3114$ 1.5678$293:7;$$ Wednesday, February 18, 2009

Valor Valor Medida (nº de ocorrrências) Esperado Obtido 293 transformações de desenhos 145 147 desenhos apagados 102 19 operações de grupos 14 1.475 média de camadas visuais / vinheta 1.7 27 elementos textuais criados 25 60 sugestões geométricas aceites 68 25 acções gestuais realizadas 26 Utilização de Componentes de Edição Wednesday, February 18, 2009

As operações de desenho assistido foram as mais comentadas *(#$ )%#$ 'quot;#$ quot;%#$ '(#$ quot;%#$ &(#$ (%#$ )(#$ '%#$ !quot;#$ !quot;#$ quot;(#$ %&#$ !%#$ %(#$ !quot;#$ &%#$ !(#$ %#$ (#$ *+,-./0.$ 1.2-./0.$ 1.2-./0.$3.45678248$ +,-./01/$ 2/3./01/$ 2/3./01/$4/56789359$ As sugestões geométricas foram As acções por esboço são mais uma ajuda importante? fáceis que as restantes? Wednesday, February 18, 2009

Resultados para recuperação #*quot; ##&!quot; ##&!quot; #$quot; ##quot; ##quot; ##quot; %&(!quot; #'quot; %quot; !quot;#$%&#'&()&*+',,-.+$%/& %quot; ,quot; (quot; +quot; !&$!quot; !quot; !quot; )&$!quot; )quot; *quot; $quot; $quot; #quot; '&(!quot; '&!quot; #quot; '&$!quot; 'quot; 'quot; -.quot;/0quot;010203456quot; -.quot;/0quot;687064?06quot;/0quot; -.quot;/0quot;010203456quot; -.quot;/0quot;A340::579=?06quot; -.quot;/0quot;A340::579=?06quot; 789:/9/56quot;;9:9quot; 9491@56quot;9<0A406quot;quot;quot;quot;quot; :0<8;0:9/56quot;B80quot; /0quot;:0<8;0:9=>5quot; /0quot;:0<8;0:9=>5quot;;5:quot; :0<8;0:9=>5quot;quot;quot;quot;quot;quot; C5:92quot;8D1AE9/56quot;quot;quot;quot;quot;quot;quot; F4:9/A<A5391Gquot;quot;quot;quot;quot; 9491@5quot;quot;quot; H915:quot;I6;0:9/5quot; J:8;5quot;KLMNquot; J:8;5quot;MNLKquot; Wednesday, February 18, 2009

Atalhos foram compreendidos e aceites 88% dos participantes acharam que os atalhos melhoravam a pesquisa de desenhos 75% aﬁrmaram que os atalhos permitem organizar melhor o conteúdo classiﬁcado Até os 25% que não acharam que criar atalhos é fácil utilizaram este mecanismo Wednesday, February 18, 2009

Satisfação com usabilidade e comics criados file:///Users/rval/Desktop/1.svg file://localhost/Users/rval/Sites/amfphp/services/reccoServices... 4 50 35106 Quantos Engenheiros de Usabilidade sao precisos para trocar uma lampada??? file:///Users/rval/Desktop/2.svg Quantos e que TU 1 of 2 1/6/09 3:49 PM achas? Oooh... depende! Wednesday, February 18, 2009

O que concluímos? Wednesday, February 18, 2009

Componentes e mecanismos de criação são valorizados pelos utilizadores permitem ganhos no tempo de concepção incentivam a criatividade e riqueza visual Wednesday, February 18, 2009

Contribuímos com nova abordagem para criar comics online oferece aumento na ﬂexibilidade e eﬁciência na criação estimula o autor a ser mais exigente e ambicioso Wednesday, February 18, 2009

A recuperação caligráﬁca de desenhos resolve a necessidade de reutilização de elementos numa narrativa de comics Wednesday, February 18, 2009

Contribuímos com novo conceito de recuperação por atalho caligráﬁco natural e vantajoso para utilizadores melhor solução para reutilização numa aplicação de desenho livre vantagens compensam passo adicional de criação de atalho Wednesday, February 18, 2009

Pensamos que a reutilização de atalhos traz ﬂexibilidade à recuperação de desenhos novo tipo de classiﬁcação a adicionar a topologia e geometria melhor organização Wednesday, February 18, 2009

Trabalho Futuro Ajustes à usabilidade da aplicação editor Problemas identiﬁcados na avaliação experimental apontam o caminho undo, acção de cópia, alteração de tamanho de vinhetas, sugestão de símbolos comics, pesquisa por exemplo... Wednesday, February 18, 2009

Mais Trabalho Futuro Insatisfação com resultados de recuperação Ambiguidade: mecanismo tradicional vs. atalhos Resultados encorajam tornar exclusivo o mecanismo por atalhos mas necessários estudos adicionais de usabilidade ... ou então adaptação de algoritmos de reconhecimento e recuperação Wednesday, February 18, 2009

Publicações Poster 3ª Conferência Nacional de Interacção Pessoa- Máquina (Interacção 2008) Submissão de artigo 9th International Symposium on SMART GRAPHICS Wednesday, February 18, 2009

Wednesday, February 18, 2009

Recco: MSc Dissertation Final Presentation

by ricardo.lopes on Feb 18, 2009

Accessibility

Upload Details

Usage Rights

2 Embeds 73

Statistics

Recco: MSc Dissertation Final Presentation — Presentation Transcript

http://blog.tiagocardoso.eu	70
http://www.slideshare.net	3