aula crp-0420-2015-12

Download Aula CRP-0420-2015-12

Post on 20-Feb-2017

1.085 views

Category:

Education

0 download

Embed Size (px)

TRANSCRIPT

  • COMUNICAO DIGITAL.

    CRP-0420:

    AULA 12: DESIGN DE INTERAO.

  • REQUISITOS: DO QUE O PRODUTO

    PRECISA? DADOS INFORMAES QUE CIRCULARO PELO

    SISTEMA. INPUTS E OUTPUTS;

    FUNCIONALIDADES OPERAES E AES;

    MERCADO CRONOGRAMA, LEGISLAO ETC;

    EXPERINCIA VALORES DA ORGANIZAO;

    APRENDIZADO CURVA E PR-REQUISITOS; E

    TCNICA PLATAFORMAS E TECNOLOGIAS.

  • ESFORO DESNECESSRIO

    MUITAS VEZES NO NOS DAMOS CONTA DELE.

    IR DE UMA JANELA A OUTRA, POSICION-LAS E REDIMENSION-LAS; CLICAR EM BOTES;

    PREEENCHER FORMULRIOS DESNECESSRIOS;

    CONFIRMAR AES;

    LEMBRAR QUE NOME SEUS ARQUIVOS TME AONDE ESTO; E

    REDEFINIR DADOS PESSOAIS OU PREFERNCIAS.

  • MENOS = MAIS ESFORO EFICINCIA

  • Ladres de EFICINCIA:

    COGNIO COMPREENSO DA ESTRUTURA DO PRODUTO E SEU FUNCIONAMENTO.

    MEMRIA LEMBRAR FUNES, SENHAS, POSIO

    DE OBJETOS, METFORAS, CAMINHOS.

    ESFORO VISUAL DESCOBRIR HIERARQUIA E SIGNIFICADO DOS OBJETOS MOSTRADOS.

    ESFORO FSICO TECLAS, GESTUAIS, MOVIMENTO DE MOUSE, NMERO DE CLIQUES.

  • Navegao esforo DESNECESSRIO.

    ENTRE JANELAS, VISUALIZAES E PGINAS;

    ENTRE PARTES DE UMA JANELA OU PGINA;

    ENTRE FERRAMENTAS, COMANDOS E MENUS; E

    DENTRO DE PARTES DA INFORMAO:

    ZOOM

    ROLAGEM

    LINKS

  • Melhorando a NAVEGAO:

    REDUZIR O NMERO DE LUGARES A IR.

    MOSTRAR SINALIZAO CLARA.

    MOSTRAR VISES AMPLAS E GERAIS.

    MAPEAR CONTROLES, FUNES E REAS.

    SE ADEQUAR S NECESSIDADES DO USURIO;.

    COLOCAR AS FUNES MAIS TEIS E DESEJADAS EM LOCAIS CONVENIENTES E PRXIMOS.

    EVITAR HIERARQUIAS.

  • http://newsmap.jp/#/b,e,m,n,t,w/pt-br_br/view/

  • INTERFACES

  • FSICASNOVAS INTERFACES

    DEMANDAM NOVAS EXPRESSES IDIOMTICAS.

  • DADOS.

    OBJETOS FSICOS SE TRANSFORMAM EM OBJETOS DE

  • AVATARES DIGITAIS,OBJETOS FSICOS AGORA TEM

    OU SEJA, TEM PERSONALIDADES.

  • EXPERINCIACOMO SE DETERMINA A

    DO USURIO EM OBJETOS FSICOS?

  • CASEIRAAUTOMAO

    AJUDA OU ATRAPALHA?

  • CONTINUIDADE.UM PROBLEMA DE

    COMO DIVIDIR AES ENTRE DISPOSITIVOS

    SE MAL CONSEGUIMOS COMPARTILHAR CONTEDOS ENTRE ELES?

  • ABISMOCOMO FAZER PARA TRANSPOR O

    ENTRE DOIS EQUIPAMENTOS?

  • LIMITAMTELAS NOS

    E SE TORNARAM A MAIOR PARTE DO COMPUTADOR.

  • MQUINACOMO MEDIAR A CONVERSA QUANDO UMA

    FALA COM OUTRA MQUINA?

  • TRANSPARENTEA TRANSIO DEVE SER

    SENO SER EXAUSTIVA.

  • PESSOAS,

    O DESIGN DEVE SER FEITO PARA SER USADO POR

    NO TELAS.

  • MOUSE?

    PERGUNTA ERRADA: COMO FAZER O PRODUTO SE COMPORTAR COMO UM

    OU COM OS SISTEMAS QUE J CONHECEMOS?

  • ESCALVELSOFTWARE TORNA O HARDWARE

    SE FOR POTENCIALIZADO POR SEU USURIO.

  • IMAGINAO,O MAIOR DESAFIO DE

    NO DE CONHECIMENTO.

  • INVENTARA MELHOR MANEIRA DE

    BRINCAR.

    OS MELHORES BRINQUEDOS E JOGOS SO POUCO FAMILIARES.

  • IMAGINAO.BRINQUEDOS SO AVATARES DA

    ELES PRECISAM EVOLUIR COM SEUS DONOS

  • INTERAO HUMANO-COMPUTADOR OU

    HCI: PLANEJAMENTO E CONCEPO DE FORMAS DE

    INTERAO ENTRE PESSOAS E COMPUTADORES.

    INTERSECO DE COMPUTAO, CINCIAS DO COMPORTAMENTO, DESIGN E ESTUDOS DE MDIA.

    A META DE LONGO PRAZO DA HCI PROJETAR SISTEMAS QUE MINIMIZEM A BARREIRA ENTRE O MODELO MENTAL DO USURIO E A MQUINA.

  • AVALIAO DE

    INTERFACES: CLAREZA: EVITA AMBIGUIDADES

    CONCISO: USA POUCOS ELEMENTOS

    FAMILIARIDADE: PEQUENA CURVA DE APRENDIZADO

    FEEDBACK: OFERECE RESPOSTAS ADEQUADAS

    CONSISTNCIA: IDENTIFICA PADRES DE USO

    ESTTICA: TORNA A EXPERINCIA AGRADVEL

    EFICINCIA: ACELERA A REALIZAO DE TAREFAS

    TOLERNCIA: EVITA PUNIR USURIOS POR SEUS

    ERROS, FORNECE MEIOS PARA SAN-LOS.

  • Tipos de

    INTERFACES: GRAPHICAL USER INTERFACES (GUI) E WEB-BASED (WUI)

    TOUCHSCREENS E TOUCHPADS

    COMMAND LINE INTERFACES (CLI)

    GESTUAIS, HPTICAS E TANGVEIS

    INTERFACES DE ATENO

    INTERFACES MISTAS

    INTERFACES DE PROCESSOS

    AGENTES CONVERSACIONAIS

    ESPACIAIS - SADAS DE LOJAS, MUSEUS

    GEOLOCALIZADAS

    RECONHECIMENTO DE VOZ E DE LINGUAGEM NATURAL

  • GRAPHICAL USER INTERFACES (GUI) E WEB-BASED (WUI)As mais populares, usadas em PCs, tablets e

    smartphones. WUIs so geradas automaticamente,

    como acontece com extratos bancrios.

  • TOUCHSCREENS E TOUCHPADS

    As comuns em tablets e smartphones. Touchpads comeam a substituir mouses por seu maior

    conforto e preciso.

  • COMMAND LINE INTERFACES (CLI)

    Linhas de comando, usadas para desenvolver cdigo.

  • GESTUAIS, HPTICAS E TANGVEIS

    Dependentes de gestos. Podem responder ao toque, identificar movimentos ou responder a presses.

  • INTERFACES DE ATENO

    Chamam a sua ateno. S devem ser usadas em ocasies importantes, seno sero irritantes.

  • INTERFACES MISTAS Comandos de diversos tipos,

    usadas para operaes complexas.

  • INTERFACES DE PROCESSOS

    Pouco interativas. Avisam quando o processo acabou.

  • AGENTES CONVERSACIONAIS

    De Clippy a Siri.

  • ESPACIAIS

    Determinam fronteiras. Usadas em museus e lojas.

  • GEOLOCALIZADASReorganizam suas coordenadas

    de acordo com a posio do usurio.

  • RECONHECIMENTODE VOZ E DE

    LINGUAGEM NATURAL

    Compreenso de comandos e frases comuns.

  • PROTOTIPAO: REDUZ INTERPRETAES EQUIVOCADAS

    PROPORCIONA EXPERINCIAS REAIS

    GERA NOVAS EXPERINCIAS

    COMUNICA SEUS OBJETIVOS AO MOSTRAR E CONTAR

    ECONOMIZA TEMPO, ESFORO E DINHEIRO

    FACILITA O FEEDBACK RPIDO

    REDUZ O RISCO

  • Finalidades mais comuns de

    PROTTIPOS: CRIAR COMUNICAO COMPARTILHADA

    TRABALHAR COM PROJETOS COMUNS

    VENDER IDEIAS INTERNAMENTE E PARA CLIENTES

    TESTAR INTERAES E USABILIDADE

    AFERIR DE VIABILIDADE TCNICA E VALOR

  • Painis de

    CONTROLE: CONCENTRAM INFORMAES MAIS IMPORTANTES

    DEVEM FACILITAR A COMPREENSO, MANIPULAO E CONTEXTO.

    DETERMINAM PRIORIDADES, CONSOLIDAM E ORGANIZAM A INFORMAO EM UMA NICA TELA, PARA QUE SEJA FACILMENTE MONITORADA

    NEM TODA INFORMAO QUANTIFICVEL

  • Erros

    COMUNS: EXCEDER OS LIMITES DE UMA TELA (SCROLL)

    FALTA DE CONTEXTO

    EXCESSO DE DETALHES

    MDIAS INADEQUADAS

    TELA CONGESTIONADA

    DECORAO INTIL

    MAU USO DE COR

    MTRICAS RUINS

    DADOS DESORGANIZADOS

    CODIFICAO IMPRECISA

    S esses elementos so tcnicos.

  • Planejamento estrutural:

    WIREFRAMES NO SO RASCUNHOS DO LAYOUT FINAL.

    COMO PLANTAS BAIXAS DE ARQUITETURA, SO INTERMEDIRIOS ENTRE A TCNICA E A COMUNICAO.

    CRIAM ARGUMENTOS RACIONAIS PARA A DISCUSSO DO LAYOUT, AUMENTANDO A USABILIDADE E CONSISTNCIA.

    COMEAM SIMPLES, SE TORNAM MAIS DETALHADOS MEDIDA QUE AUMENTA SUA FUNCIONALIDADE.

  • Construindo WIREFRAMES:

    1. DEIXE O OBJETIVO BEM CLARO

    2.SEJA FUNCIONAL, NO BONITO

    3.TENHA O MNIMO DE ELEMENTOS

    4.DESENHE TODAS AS AES

    5.ORGANIZE-O POR PERSONAS

    6.PROCURE ELEMENTOS REPETITIVOS

    7.TESTE HIERARQUIAS E SENTIDO

  • http://www.google.com.br/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&docid=_drQP5Vo8ilLpM&tbnid=4ioKWlxpf3DKaM:&ved=0CAUQjRw&url=http%3A%2F

    %2F981theriver.com%2Fhand-picked%2F&ei=4zbZU8i8JpHgsASRy4HgDA&bvm=bv.

    71778758,d.cWc&psig=AFQjCNHdbi0P8BkMh3YNi9xamMBcSFReWA&ust=1406830683992231UI KITS

    Ajudam a compor o layout

  • Identifique os elementos

    PRINCIPAIS: COMECE A ESTRUTURA PELOS ELEMENTOS MAIS

    IMPORTANTES PARA A EXPERINCIA DO USURIO.

    QUAL SUA PRINCIPAL FINALIDADE?

    COMO GARANTIR QUE ESTEJA VISVEL E SEJA FCIL DE ENCONTRAR?

    O QUE SE ESPERA QUE ELE FAA DEPOIS DE ATINGIR SEU OBJETIVO?

    COMO TORNAR CLARA A AO?

    ESSA DIVISO DEVE SER FEITA POR PERSONA.

  • VOCS

  • TRABALHO FINAL:REFLECONS

    + PROTTIPO

  • TRABALHO FINAL:REFLEXO 1: CONTEXTO

    REFLEXO 2: A COISA E EMERGNCIA REFLEXO 3: IDENTIDADE E TRANSUMANISMO

    REFLEXO 4: BIG DATA, LIVRE ARBTRIO E TICA REFLEXO 5: EDUCAO

    REFLEXO 6: INTELIGNCIA ARTIFICIAL REFLEXO 7: TENDNCIAS

    REFLEXO 8: GAMES

    REFLEXO 9: EXCLUSO DIGITAL REFLEXO 10: INTERFACES

  • PROTTIPO: MECNICA, DINMICA E ESTTICA

    3 PERSONAS 1 EXEMPLO DE CENRIO

    REQUISITOS INTERFACE(S)

    WIREFRAMES JORNADA DO USURIO EFEITOS ESPERADOS

  • PRXIMAS AULAS:

    19/11: DEBATE DE IDEIAS 26/11: PECHA KUCHA 1 03/12: PECHA KUCHA 2

  • PRAZOS:

    25/11: PECHA KUCHA (TODOS) 20 TELAS EM JPG

    OU 640 DE VDEO

    07/12: REFLECONS

  • PECHA KUCHA:EM CASA,

    COM BREJAS.

  • FIM

  • PALESTRAS TED:JAMES PATTEN: THE BEST COMPUTER INTERFACE?

    NICHOLAS NEGROPONTE: 30-YEAR HISTORY OF FUTURE APARNA RAO: ART THAT CRAVES YOUR ATTENTION

    SERGEY BRIN: WHY GOOGLE GLASS? JOHN UNDERKOFFLER: POINTING TO THE FUTURE OF UI

    JEFF HAN: PROMISE OF MULTI-TOUCH INTERFACE DON NORMAN: 3 WAYS GOOD DESIGN MAKES YOU HAPPY

    DENIS DUTTON: A DARWINIAN THEORY OF BEAUTY

  • FICOHALT AND CATCH FIRE - S01

    MINORITY REPORT IRON MAN OBLIVION

    CONTINUUM

  • LEITURAS

    ABOUT FACE 3 - CAPS 5 E 6 BRAVE NUI WORLD - CAPS 2 E 3 CHANGE BY DESIGN - CAPS 1 E 2