Orientação a objetos aplicado ao design de interface

Nessa apresentação abordo o conceito de orientação a objetos e motivos pelos quais considero importante aplicar esse mindset durante o processo de modelagem de dados e arquitetura de informação no início de um projeto de interface, de forma colaborativa com o time de desenvolvimento. O conteúdo foi baseado no artigo Object-oriented UX escrito por Sophia Voychehovski.

Transcript

1. Orientação a objetos Aplicado ao design de interface
2. Sobre Thiago Victorino Designer de Produto / UI Developer @ Cheesecake Labs Agitão @ ModularUI
3. O que é orientação a objetos?
4. Paradigma de programação Associação com objetos do mundo real Forma de organizar e dar sentido
5. Rede social
6. E-commerce
7. Não é sobre imagens…
8. Não é sobre imagens… É sobre dados.
9. Usuário • Nome • E-mail • CPF • Data de Nascimento • Telefone • Endereços • Cartões de Crédito E-commerce
10. Usuário • Nome • E-mail • CPF • Data de Nascimento • Telefone • Endereços • Cartões de Crédito • Favoritos E-commerce
11. Usuário • Nome • E-mail • CPF • Data de Nascimento • Telefone • Endereços • Cartões de Crédito • Favoritos ◦ Produtos E-commerce
12. Usuário • Nome • E-mail • CPF • Data de Nascimento • Telefone • Endereços • Cartões de Crédito • Favoritos ◦ Produtos E-commerce Produto • Nome • Valor • Descrição • Fotos
13. Usuário • Nome • E-mail • CPF • Data de Nascimento • Telefone • Endereços • Cartões de Crédito • Favoritos ◦ Produtos Produto • Nome • Valor • Descrição • Fotos • Lista de Avaliações ◦ Avaliação E-commerce
14. Usuário • Nome • E-mail • CPF • Data de Nascimento • Telefone • Endereços • Cartões de Crédito • Favoritos ◦ Produtos Produto • Nome • Valor • Descrição • Fotos • Lista de Avaliações ◦ Avaliação E-commerce Avaliação • Nota • Título • Descrição
15. Usuário • Nome • E-mail • CPF • Data de Nascimento • Telefone • Endereços • Cartões de Crédito • Favoritos ◦ Produtos Produto • Nome • Valor • Descrição • Fotos • Lista de Avaliações ◦ Avaliação E-commerce Avaliação • Nota • Título • Descrição • Autor ◦ Usuário
16. Usuário • Nome • E-mail • CPF • Data de Nascimento • Telefone • Endereços • Cartões de Crédito • Favoritos ◦ Produtos • Avaliações Realizadas ◦ Avaliação Produto • Nome • Valor • Descrição • Fotos • Lista de Avaliações ◦ Avaliação E-commerce Avaliação • Nota • Título • Descrição • Autor ◦ Usuário
17. Usuário • Nome • E-mail • CPF • Data de Nascimento • Telefone • Endereços • Cartões de Crédito • Favoritos ◦ Produtos • Avaliações Realizadas ◦ Avaliação Produto • Nome • Valor • Descrição • Fotos • Lista de Avaliações ◦ Avaliação E-commerce Avaliação • Nota • Título • Descrição • Autor ◦ Usuário • Produto ◦ Produto
18. Mapeando um Sistema
19. Mapeando um Sistema de objetos e relações
20. Conteúdo / Características
21. Usuário • Nome • E-mail • CPF • Data de Nascimento • Telefone • Endereços • Cartões de Crédito • Favoritos ◦ Produtos • Avaliações Realizadas ◦ Avaliação Produto • Nome • Valor • Descrição • Fotos • Lista de Avaliações ◦ Avaliação E-commerce Avaliação • Nota • Título • Descrição • Autor ◦ Usuário • Produto ◦ Produto
22. Conteúdo / Características Relações / Associações
23. Usuário • Nome • E-mail • CPF • Data de Nascimento • Telefone • Endereços • Cartões de Crédito • Favoritos ◦ Produtos • Avaliações Realizadas ◦ Avaliação Produto • Nome • Valor • Descrição • Fotos • Lista de Avaliações ◦ Avaliação E-commerce Avaliação • Nota • Título • Descrição • Autor ◦ Usuário • Produto ◦ Produto
24. Conteúdo / Características Relações / Associações Metadados
25. Usuário • Nome • E-mail • CPF • Data de Nascimento • Telefone • Endereços • Cartões de Crédito • Favoritos ◦ Produtos • Avaliações Realizadas ◦ Avaliação Produto • Nome • Valor • Descrição • Fotos • Lista de Avaliações ◦ Avaliação • # de Favoritos E-commerce Avaliação • Nota • Título • Descrição • Produto • Autor ◦ Usuário • Data de criação
26. Por quê?
27. Colaboração entre design e desenvolvimento
28. Colaboração entre design e desenvolvimento Modularidade
31. Colaboração entre design e desenvolvimento Modularidade Navegação rica
33. Como?
34. Comece com user stories
35. "O usuário poderá navegar por uma seleção de produtos e adicioná-los a um carrinho de compras." "Um produto poderá receber avaliações de usuários." "O usuário poderá visualizar seu histórico de pedidos realizados." "O usuário poderá favoritar produtos e adicioná-los a uma lista de desejos." User stories
36. "O usuário poderá navegar por uma seleção de produtos e adicioná-los a um carrinho de compras." "Um produto poderá receber avaliações de usuários." "O usuário poderá visualizar seu histórico de pedidos realizados." "O usuário poderá favoritar produtos e adicioná-los a uma lista de desejos." User stories
37. "O usuário poderá navegar por uma seleção de produtos e adicioná-los a um carrinho de compras." "Um produto poderá receber avaliações de usuários." "O usuário poderá visualizar seu histórico de pedidos realizados." "O usuário poderá favoritar produtos e adicioná-los a uma lista de desejos." User stories
38. "O usuário poderá navegar por uma seleção de produtos e adicioná-los a um carrinho de compras." "Um produto poderá receber avaliações de usuários." "O usuário poderá visualizar seu histórico de pedidos realizados." "O usuário poderá favoritar produtos e adicioná-los a uma lista de desejos." User stories
39. "O usuário poderá navegar por uma seleção de produtos e adicioná-los a um carrinho de compras." "Um produto poderá receber avaliações de usuários." "O usuário poderá visualizar seu histórico de pedidos realizados." "O usuário poderá favoritar produtos e adicioná-los a uma lista de desejos." User stories
40. Processo contínuo
41. Pedido • Usuário • Endereço de entrega • Opção de pagamento • Carrinho de compras ◦ Produto 1 ◦ Produto 2 ◦ ... • Valor total • Data da compra E-commerce
42. Pedido • Usuário • Endereço de entrega • Opção de pagamento • Carrinho de compras ◦ Produto 1 ◦ Produto 2 ◦ ... • Valor total • Data da compra E-commerce Usuário • Nome • E-mail • CPF • Data de Nascimento • Telefone • Endereços • Cartões de Crédito • Favoritos ◦ Produtos • Avaliações Realizadas ◦ Avaliação • Histórico de Pedidos ◦ Pedido
43. Quero mais!
44. OOUX By Sophia Voychehovski Object-oriented UX (2015) alistapart.com/article/object-oriented-ux OOUX: A foundation for interaction design (2016) alistapart.com/article/ooux-a-foundation-for-int eraction-design
45. ModularUI ModularUI is a movement created by designers and developers who believe that digital interfaces should be built as modular design systems and that a better workflow can be achieved with a collaborative and iterative approach, promoting efficiency and reducing waste. modular-ui.com facebook.com/groups/modular.ui #modular-ui @ ixdabr.herokuapp.com (Slack)
46. Obrigado! twitter.com/tfvictorino facebook.com/tfvictorino github.com/tfvictorino tfvictorino@gmail.com