1. UNIVESIDADE METODIASTA UNIDA de
MOCAMBIQUE
ANALISE e DESENHO de
SISTEMAS
Curso:
• Engenharia informática e tecnologia
Discentes:
• CHELTON MALEN
• LIDSON PAVE
• NILDO JACINTO
Docente:
• Me FAUSTINO GUINGE
Desenho de interface do usuário
(UI Design)
• (Layout, Conscientização do conteúdo, Estética,
Experiencias do usuário, Consistência, Minimize o
esforço do usuário)
• PROCESSO DE DESIGN DA INTERFACE DO
USUARIO
Desenho de interfaces através de cenários, Projeto de
estrutura de interface, Design de padrão de interface,
Prototipagem de design de interface.
AVALIACAO DE UI
Cambine, 17 de junho de 2022
3. layout
• O primeiro princípio do design da interface do usuário lida com o layout da tela,
formulário ou relatório. Layout refere-se à organização de áreas da tela ou
documento para diferentes propósitos e uso dessas áreas de forma consistente em
toda a interface do usuário. A maioria dos softwares projetados para computadores
pessoais segue a abordagem padrão do Windows ou Macin tosh para o layout da
tela. Essa abordagem divide a tela em três áreas principais: A área superior fornece
ao usuário maneiras de navegar pelo sistema; a área do meio (e maior) é para
exibição do trabalho do usuário; e a área inferior contém informações de status
sobre o que o usuário está fazendo.
Cambine, 17 de junho de 2022
4. Conscientização do conteúdo
Consciência de conteúdo refere-se à capacidade de uma interface de tornar o
usuário ciente das informações que ela contém com o mínimo de esforço do
usuário. Todas as partes da interface, seja navegação, entrada ou saída, devem
fornecer o máximo de reconhecimento de conteúdo possível, mas é
particularmente importante para formulários ou relatórios que são usados de
forma rápida ou irregular (por exemplo, um site)
Cambine, 17 de junho de 2022
5. Estética
Estética refere-se ao design de interfaces que são agradáveis aos olhos. As interfaces
não precisam ser obras de arte, mas precisam ser funcionais e convidativas ao uso. Na
maioria dos casos, “menos é mais”, o que significa que um design simples e
minimalista é o melhor. O espaço geralmente é escasso em formulários e relatórios, e
muitas vezes há a tentação de espremer o máximo de informações possível em uma
página ou tela. nfelizmente, isso pode tornar um formulário ou relatório tão
desagradável que os usuários não desejam preenchê-lo. Em geral, todos os formulários
e relatórios precisam de pelo menos uma quantidade mínima de espaço em branco que
é intencionalmente deixado em branco
Cambine, 17 de junho de 2022
6. Experiência de usuário
• A experiência do usuário refere-se ao design da interface do usuário tendo em mente o nível
de experiência do usuário com o computador. Um sistema de computador será usado por
pessoas com experiência e por pessoas sem experiência; a interface do usuário deve ser
projetada para ambos os tipos. Usuários novatos geralmente estão mais preocupados com a
facilidade de aprendizado – com que rapidez e facilidade eles podem aprender a usar o
sistema. Os usuários experientes geralmente estão mais preocupados com a facilidade de uso
- com que rapidez e facilidade eles podem concluir uma tarefa com o sistema depois de
aprenderem a usá-lo. Muitas vezes, esses dois objetivos são complementares e levam a
decisões de projeto semelhantes, mas, às vezes, há compensações. Os novatos, por exemplo,
geralmente preferem menus que mostram todas as funções do sistema disponíveis, pois
facilitam o aprendizado. Os especialistas, por outro lado, às vezes preferem menos menus
organizados em torno das funções mais usadas.
Cambine, 17 de junho de 2022
7. Consistência
A consistência no projeto é provavelmente o fator mais importante para tornar
um sistema simples de usar, porque permite que os usuários prevejam o que
acontecerá. Quando as interfaces são consistentes, os usuários podem interagir
com uma parte do sistema e saber como interagir com o restante - além, é claro,
de elementos exclusivos dessas partes
Cambine, 17 de junho de 2022
8. Minimize o esforço do usuário
• Finalmente, as interfaces devem ser projetadas para minimizar a quantidade
de esforço necessária para realizar as tarefas. Isso significa usar o menor
número possível de cliques do mouse ou pressionamentos de tecla para
mover de uma parte do sistema para outra. A maioria dos designers de
interface segue a regra dos três cliques: os usuários devem ser capazes de ir
do menu inicial ou principal de um sistema para a informação ou ação que
desejam com no máximo três cliques do mouse ou três pressionamentos de
tecla
Cambine, 17 de junho de 2022
13. Design de Padrões de Interface
• Metáfora da Interface
• Modelos de interface
• Objetos de interface
• Ações da interface
• Ícones
Cambine, 17 de junho de 2022
14. Prototipagem de Design de Interface
Storybdoar Protótipo HTML
• Como o nome sugere, um protótipo
HTML é construído com o uso de páginas
da Web criadas em HTML (linguagem de
marcação de hipertexto). O designer usa
HTML para criar uma série de páginas da
Web que mostram as partes fundamentais
do sistema.
• Os protótipos HTML são superiores aos
storyboards
Cambine, 17 de junho de 2022
15. Protótipo de linguagem Um protótipo de linguagem é um
protótipo de design de interface construído na linguagem real ou pela ferramenta real que será
usada para construir o sistema.
Os protótipos de linguagem são projetados da mesma forma que os protótipos HTML.
Cambine, 17 de junho de 2022
17. Selecionando as técnicas apropriadas
• Os projetos geralmente usam uma combinação de diferentes técnicas de
prototipagem de design de interface para diferentes partes do sistema. O story
boarding é o mais rápido e menos caro, mas fornece a menor quantidade de
detalhes.
• A prototipagem de linguagem é a abordagem mais lenta, mais cara e mais detalhada.
• A prototipagem HTML fica entre os dois extremos. Portanto, o storyboard é usado
para partes do sistema em que a interface é bem compreendida e quando protótipos
mais caros são considerados desnecessários. Protótipos HTML e protótipos de
linguagem são usados para partes do sistema que são críticas, mas não bem
compreendidas.
Cambine, 17 de junho de 2022
18. Avaliação da interface
• Avaliação heurística
• Avaliação passo a passo
• Avaliação interativa
• Testes formais de usabilidade
Cambine, 17 de junho de 2022
21. PROJETO DE NAVEGAÇÃO
• O componente de navegação da interface permite ao usuário inserir
comandos para navegar pelo sistema e realizar ações para inserir e revisar as
informações nele contidas. O componente de navegação também apresenta
mensagens ao usuário sobre o sucesso ou fracasso de suas ações. O objetivo
do sistema de navegação é tornar o sistema o mais simples possível de usar.
Um bom componente de navegação é aquele que o usuário nunca percebe.
Ele simplesmente funciona da maneira que o usuário espera e, portanto, o
usuário não pensa muito nele
Cambine, 17 de junho de 2022
22. Princípios básicos
• Uma das coisas mais difíceis de usar um sistema de computador é aprender a
manipular os controles de navegação para que o sistema faça o que você deseja. Os
analistas geralmente devem presumir que os usuários não leram o manual, não
participaram do treinamento e não têm ajuda externa prontamente à mão. Todos os
controles devem ser claros e compreensíveis e colocados em um local intuitivo na
tela. Idealmente, os controles devem antecipar o que o usuário fará e simplificar seus
esforços. Por exemplo, muitos programas de configuração são projetados para que,
para uma instalação típica, o usuário possa simplesmente continuar pressionando o
botão “Next”
Cambine, 17 de junho de 2022
23. • Prevenir erros
• Simplifique a recuperação de erros
• Use uma ordem gramatical consistente
Cambine, 17 de junho de 2022
24. Tipos de controles de navegação
Existem três abordagens básicas de software para definir os comandos do
usuário: linguagens, menus e manipulação direta.
1) Idiomas
2) Menus
3) Manipulação Direta
Cambine, 17 de junho de 2022
25. Mensagens
• As mensagens são a maneira pela qual o sistema responde a um usuário e o
informa sobre o status da interação.
• ‘Existem muitos tipos diferentes de mensagens, como mensagens de erro,
mensagens de confirmação, mensagens de confirmação, mensagens de atraso
e mensagens de ajuda (Figura 9-12). Em geral, as mensagens devem ser
claras, concisas e completas, o que às vezes são objetivos conflitantes’
Cambine, 17 de junho de 2022
27. PROJETO DE ENTRADA (input design)
O objetivo do projeto de entrada é capturar informações precisas para o
sistema de forma simples e fácil. Os princípios fundamentais para o design de
insumos refletem a natureza dos insumos (seja em lote ou online) e formas de
simplificar sua coleta.
• Use o processamento on-line e em lote adequadamente
• Capturar dados na fonte
• Minimizar
Cambine, 17 de junho de 2022
29. Validação de entrada
• Todos os dados inseridos no sistema devem ser validados para garantir a
precisão. A validação de entrada (também chamada de verificações de edição)
pode assumir várias formas. Idealmente, para evitar que informações
inválidas entrem no sistema, os sistemas de computador não devem aceitar
dados que falhem em qualquer verificação de validação importante. No
entanto, isso pode ser muito difícil, e os dados inválidos geralmente escapam
dos operadores de entrada de dados e dos usuários que fornecem as
informações. Cabe ao sistema identificar dados inválidos e fazer alterações ou
notificar alguém que possa resolver o problema de informação.
Cambine, 17 de junho de 2022
31. PROJETO DE SAÍDA
O objetivo do mecanismo de saída é apresentar informações aos usuários para
que eles possam entendê-las com precisão com o mínimo de esforço. Os
princípios fundamentais para o design de saída refletem como as saídas são
usadas e maneiras de tornar mais simples para os usuários entendê-las
• Compreender o uso do relatório.
• Gerenciar a carga de informações.
• Minimize o viés.
Cambine, 17 de junho de 2022
32. RESUMO
• Princípios de design da interface do usuário
O primeiro elemento do design da interface do usuário é o layout da tela, formulário ou relatório, que
geralmente é representado por formas retangulares com uma área superior para navegação, uma área central para
entradas e saídas e uma linha de status na parte inferior. . O design deve ajudar o usuário a estar ciente do
conteúdo e do contexto, tanto entre as diferentes partes do sistema à medida que navegam por ele quanto em
qualquer formulário ou relatório. Todas as interfaces devem ser esteticamente agradáveis (não necessariamente
obras de arte) e precisam incluir espaço em branco significativo, usar cores com cuidado e ser consistentes com
as fontes. A maioria das interfaces deve ser projetada para oferecer suporte a usuários iniciantes ou iniciantes,
bem como a usuários exp
A consistência no design (dentro do sistema e em outros sistemas usados pelos usuários) é importante para os
controles de navegação, terminologia e layout de formulários e relatórios. Por fim, todas as interfaces devem
tentar minimizar o esforço do usuário, por exemplo, exigindo no máximo três cliques no menu principal para
realizar uma ação.
Cambine, 17 de junho de 2022
33. O processo de design da interface do usuário
• Primeiro, os analistas desenvolvem cenários de uso que descrevem padrões de ações
comumente usados que os usuários executarão. Em segundo lugar, eles projetam a estrutura
da interface por meio de um ISD baseado no DFD. O ISD é então testado com os cenários
de uso para garantir que ele permita que os usuários executem esses cenários de maneira
rápida e suave. Terceiro, os analistas definem os padrões de interface em termos de
metáfora(s) de interface, objetos, ações e ícones. Esses elementos são reunidos pelo design
de um modelo de interface básico para cada seção principal do sistema. Quarto, os designs
das interfaces individuais são prototipados, seja por meio de um storyboard simples, um
protótipo HTML ou um protótipo na linguagem de desenvolvimento do próprio sistema
(por exemplo, Visual Basic). Finalmente, a avaliação da interface é conduzida por avaliação
heurística, avaliação passo a passo, avaliação interativa ou teste formal de usabilidade. Essa
avaliação quase sempre identifica melhorias, por isso as interfaces são redesenhadas e
avaliadas ainda mais.
Cambine, 17 de junho de 2022
34. Projeto de navegação
• O objetivo fundamental do projeto de navegação é tornar o sistema o mais
simples de usar possível, evitando que o usuário cometa erros, simplificando
a recuperação de erros e usando uma ordem gramatical consistente
(geralmente ordem objeto-ação).
• O objetivo fundamental do projeto de navegação é tornar o sistema o mais
simples de usar possível, evitando que o usuário cometa erros, simplificando
a recuperação de erros e usando uma ordem gramatical consistente
(geralmente ordem objeto-ação).
Cambine, 17 de junho de 2022
35. Projeto de entrada
• O objetivo do projeto de entrada é capturar de forma simples e fácil informações
precisas para o sistema, normalmente usando processamento online ou em lote,
capturando dados na fonte, e minimizando as teclas. O design de entrada inclui o
design de telas de entrada e todos os formulários pré-impressos usados para coletar
dados antes de serem inseridos no sistema de informações. Existem muitos tipos de
entradas, como campos de texto, campos numéricos, caixas de seleção, botões de
opção, caixas de listagem na tela, caixas de listagem suspensas e controles
deslizantes. A maioria das entradas é validada por alguma combinação de
verificações de integridade, verificações de formato, verificações de intervalo, dígitos
de verificação, verificações de consistência e verificações de banco de dados.
Cambine, 17 de junho de 2022
36. Projeto de saída
• O objetivo do design de saída é apresentar informações aos usuários para
que possam entendê-las com precisão com o mínimo de esforço, geralmente
entendendo como os relatórios serão usados e projetando-os para minimizar
a sobrecarga e o viés de informações. Design de saída significa projetar telas
e relatórios em outras mídias, como papel e Web. Existem muitos tipos de
relatórios, incluindo relatórios detalhados, relatórios resumidos, relatórios de
exceção, documentos de recuperação e gráficos.
Cambine, 17 de junho de 2022