Design de aplicativos moveis
Os dispositivos móveis mais comuns : S m a r t p h o n e ; P D A ; Te l e m ó v e l ( pt) / C e l u l a r ( br); C o n s o l e p o r t á t i l ; U l t r a M o b i l e P C ; U l t r a b o o k ; N o t e b o o k ; N e t b o o k ; L a p t o p ; C o l e t o r d e d a d o s ; 2
Padrões primários de navegação S p r i n g b o a r d M e n u d e l i s t a A b a s G a l e r i a D a s h b o a r d M e t á f o r a M e g a m e n u 3
Springboard O p a d r ã o S p r i n g b o a r d ( t r a m p o l i m ) é n e u t r o em r e l a ç ã o ao s i s t e m a o p e r a c i o n a l e f u n c i o n a i g u a l m e n t e bem em v á r i o s d i s p o s i t i v o s. As v e z e s e l a t a m b é m é c h a m a d o d e L a u n c h p a d ( p l a t a f o r m a d e l a n ç a m e n t o ). O S p r i n g b o a r d s e c a r a c t e r i z a p o r u m a p á g i n a i n i c i a l de o p ç õ e s d e m e n u que a g e m c o m o u m p o n t o de p a r t i d a p a r a o a p l i c a t i v o. O F a c e b o o k s e g u i u o d e s i g n S p r i n g b o a r d d a t e l a i n i c i a l d o i O S, e e l e s f o r a m r a p i d a m e n t e e m u l a d o s p o r o u t r o s a p l i c a t i v o s. 4
Springboard 5
Springboard 6
Springboard 7
Springboard S p r i n g b o a r d s p e r s o n a l i z a d o s p o d e m ser u s a d o s p a r a e x i b i r i n f o r m a ç õ e s p e s s o a i s de p e r f i l de a c o r d o c o m a s o p ç õ e s d e m e n u. G r a d e s d e 3 3, 2 3, 2 2, e 1 2 s ã o os l a y o u t s m a i s c o m u n s. Os S p r i n g b o a r d s n ã o p r e c i s a m n e c e s s a r i a m e n t e s e g u i r u m l a y o u t em g r a d e. A l g u m a s o p ç õ e s p o d e m s e r p r o p o r c i o n a l m e n t e m a i o r e s p a r a i n d i c a r m a i s i m p o r t â n c i a. 8
Menu de lista O m e n u d e l i s t a é s i m i l a r ao S p r i n g b o a r d n o s e n t i d o que c a d a u m é u m p o n t o de p a r t i d a p a r a o a p l i c a t i v o. E x i s t e m n u m e r o r a s v a r i a ç õ e s d e s s e p a d r ã o i n c l u i n d o m e n u s de l i s t a p e r s o n a l i z a d o s, l i s t a s a g r u p a d a s e l i s t a s a v a n ç a d a s. L i s t a s a v a n ç a d a s s ã o s i m p l e s m e n u s d e l i s t a c o m r e c u r s o s a d i c i o n a i s p a r a b u s c a, n a v e g a ç ã o e f i l t r a g e m. 9
Menu de lista 10 L i s t a p e r s o n a l i z a d a
Menu de lista 11 L i s t a a g r u p a d a
Menu de lista 12 L i s t a a v a n ç a d a
Menu de listas M e n u s d e l i s t a s f u n c i o n a m bem p a r a t í t u l o s l o n g o s ou p a r a os que r e q u e r e m s u b t e x t o. A p l i c a t i v o s u s a n d o M e n u s d e l i s t a d e v e m o f e r e c e r o p ç ã o em t o d a s a s t e l a s i n t e r n a s p a r a r e t o r n a r p a r a o M e n u d e l i s t a, u s u a l m e n t e u m b o t ã o na b a r r a de t í t u l o s c o m u m í c o n e de l i s t a ou a p a l a v r a m e n u. 13
Abas A n a v e g a ç ã o p o r a b a s n ã o é n e u t r a em t e r m o s de s i s t e m a o p e r a c i o n a l, u m a v e z que c a d a s i s t e m a t e m s u a s pró p r i a s i n s t r u ç õ e s p a r a l o c a l i z a ç ã o e d e s i g n d e a b a s. Q u a n d o e s c o l h e r e s t e p a d r ã o p a r a seu a p l i c a t i v o, e s t e j a p r e p a r a d o p a r a p e r s o n a l i z a r a l o c a l i z a ç ã o d a s a b a s p a r a d i f e r e n t e s s i s t e m a s o p e r a c i o n a i s. 14
Abas 15
Abas A b a s i n f e r i o r e s p r e f e r i d a s p e l o I o s, W e b O s e B l a c k B e r r y, s ã o a o p ç ã o m a i s a m i g á v e l p a r a u s o c o m o p o l e g a r. 16
Abas 17
Abas A r o l a g e m h o r i z o n t a l d e a b a s i n f e r i o r e s f o r n e c e u m m e c a n i s m o ú t i l p a r a o f e r t a de m a i s o p ç õ e s sem ser n e c e s s á r i o a b r i r u m a t e l a m a i s. 18
Abas A b a s s u p e r i o r e s, p r e f e r i d a s p e l o A n d r o i d, S y m b i a n e W i n d o w s, t ê m a p a r ê n c i a f a m i l i a r, u m a v e z que s ã o m o d e l a d a s s o b r e p a d r õ e s c o m u n s de n a v e g a ç ã o de w e b s i t e s. O N o k i a e o W i n d o w s u s a m a b a s s u p e r i o r e s r o l a n t e s n a s q u a i s v o c ê p o d e a r r a s t a r os d e d o s p a r a r e v e l a r m a i s o p ç õ e s de m e n u. I n d i q u e c l a r a m e n t e o i t e m d e m e n u s e l e c i o n a d o d i f e r e n c i a n d o v i s u a l m e n t e a a b a s e l e c i o n a d a d a s d e m a i s. U s e í c o n e s f á c e i s de r e c o n h e c e r ou í c o n e s c o m t í t u l o. 19
Abas 20
Galerias O p a d r ã o G a l e r i a e x i b e i t e n s de c o n t e ú d o i n d i v i d u a i s p a r a n a v e g a ç ã o. O c o n t e ú d o g e r a l m e n t e c o m p o r t a a r t i g o s, r e c e i t a s, f o t o s ou p r o d u t o s i n d i v i d u a i s que p o d e m ser o r g a n i z a d o s em u m c a r r o c e l, u m a g r a d e ou em s l i d e s h o w. 21
Galerias A s v e z e s p o d e ser m a i s f á c i l n a v e g a r p e l o c o n t e ú d o se e l e e s t i v e r a g r u p a d o. O p a d r ã o G a l e r i a f u n c i o n a m e l h o r c o m c o n t e ú d o a t u a l i z a d o f r e q u e n t e m e n t e, em que a s p e s s o a s d e s e j e m n a v e g a r. 22
Dashboard P a i n e i s de i n t r u m e n t o s f o r n e c e m u m r e s u m o de i n d i c a d o r e s p r i n c i p a i s de d e s e m p e n h o ( K e y P e r f o r m a n c e I n d i c a t o r s K P I s ). C a d a m é t r i c a p o d e ser e x a m i n a d a p a r a i n f o r m a ç õ e s a d i c i o n a i s. U t e i s p a r a a p l i c a t i v o s f i n a n c e i r o s, f e r r a m e n t a s a n a l í t i c a s e a p l i c a t i v o s de v e n d a s e m a r k e t i n g. 23
Dashboard Não s o b r e c a r r e g u e o d a s h b o a r d! C o n d u z a p e s q u i s a s p a r a d e t e r m i n a r a s m é t r i c a s - c h a v e a s e r e m i n c l u í d a s. 24
Dashboard 25
Dashboard 26
Metáfora E s t e p a d r ã o se c a r a c t e r i z a p o r u m a l a n d i n g p a g e m o d e l a d a p a r a r e f l e t i r a m e t á f o r a d o a p l i c a t i v o. I s s o é u s a d o p r i n c i p a l m e n t e em j o g o s, m a s p o d e ser v i s t o t a m b é m em a p l i c a t i v o s que a j u d a m a s p e s s o a s a c a t a l o g a r e c a t e g o r i z a r i t e n s, c o m o n o t a s, l i v r o s, v i n h o e t c. 27
Metáfora 28
Metáfora 29
Megamenu U m g r a n d e p a i n e l s o b r e p o s t o c o m f o r m a t a ç ã o e a g r u p a m e n t o p e r s o n a l i z a d o s d a s o p ç õ e s d e m e n u. 30
Megamenu D e t e r m i n e s u a a r q u i t e t u r a de i n f o r m a ç õ e s a n t e s de e s c o l h e r o p a d r ã o de n a v e g a ç ã o. E s c o l h a u m p a d r ã o m a i s a p r o p r i a d o, c o m o A b a s, s e h o u v e r s o m e n t e p o u c a s s e s s õ e s p r i n c i p a i s n o a p l i c a t i v o. 31
Navegação secundária Os p a d r õ e s p r i m á r i o s de n a v e g a ç ã o p o d e m ser c o m b i n a d o s p a r a p a d r õ e s s e c u n d á r i o s de n a v e g a ç ã o. 32
Navegação secundária C a r ro s s e l d e p á g i n a s U t i l i z a d o p a r a u m a n a v e g a ç ã o r a p i d i n h a em u m c o n j u n t o d i s c r e t o de p á g i n a s u t i l i z a n d o o a r r a s t a r d o dedo. 33
Navegação secundária C a r ro s s e l d e i m a g e n s U t i l i z a d o em d i m e n s õ e s 2 D ou c o v e r f l o w ( u m a i n t e r f a c e t r i d i m e n s i o n a l p a r a n a v e g a ç ã o em b i b l i o t e c a s ), p a r a e x i b i r f i l m e s, i m a g e n s em d e s t a q u e. 34
Navegação secundária L i s t a e x p a n d i d a P e r m i t e que u m a ú n i c a t e l a s e j a a c e s s a d a p a r a r e v e l a r m a i s i n f o r m a ç õ e s. 35
FORMULÁRIOS 36
Formulários L o g i n R e g i s t r o C h e c ko u t C á l c u l o s F o r m u l á r i o de b u s c a M u l t i p a s s o s F o r m u l á r i o l o n g o 37
Formulários S e m p r e p r e c i s a m o s u t i l i z a r f o r m u l á r i o s p a r a d i v e r s o s t i p o s d e t a r e f a s, d e s d e l o g i n s às b u s c a s. 38
Formulários L o g i n L o g i n s d e v e m t e r o m e n o r n ú m e r o de c a m p o s de e n t r a d a, p a r a t o r n a r i n t u i t i v o. 39
Formulários Re g i s t ro I g u a l m e n t e ao l o g i n o r e g i s t r o d e v e t e r o m e n o r n ú m e r o de c a m p o s d e e n t r a d a, p a r a t o r n a r i n t u i t i v o. O f e r e ç a f e e d b a c k p a r a m e l h o r a p r o v e i t a m e n t o. 40
Formulários C h e c ko u t O f e r e ç a u m m e c a n i s m o p a r a u m c h e c k o u t m a i s r á p i d o em v i s i t a s p o s t e r i o r e s, c o m i n f o r m a ç õ e s d e l o g i n ou p a r a c h e c k o u t. 41
Formulários B u s c a C o m o o u t r o s p a d r õ e s de f o r m u l á r i o, os c r i t é r i o s de b u s c a d e v e m ser l i m i t a d o s s o m e n t e a c o m p o s e s s e n c i a i s. 42
TABELAS E LISTAS 43
Tabelas e listas Ta b e l a b á s i c a Ta b e l a s e m c a b e ç a l h o s L i n h a s a g r u p a d a s C o l u n a f i x a L i s t a s em c a s c a t a Ta b e l a e d i t á v e l Ta b e l a c o m i n d i c a d o r e s v i s u a i s V i s ã o g e r a l e d a d o s 44
Tabelas e listas Ta b e l a s U t i l i z a d o s p a r a a p r e s e n t a r d a d o s em v á r i o s f o r m a t o s em a p l i c a t i v o s. 45
Tabelas e listas Ta b e l a b á s i c a E s t a é só u m a t a b e l a p a d r ã o c o m c a b e ç a l h o s de c o l u n a f i x o s e u m l a y o u t em g r a d e. 46
Tabelas e listas Ta b e l a s e m c a b e ç a l h o A t a b e l a sem c a b e ç a l h o é c a r a c t e r i z a d a p o r l i n h a s g r o s s a s e a p r e s e n t a m m ú l t i p l a s v a r i á v e i s s o b r e u m o b j e t o, e n ã o r ó t u l o s de c o l u n a. 47
Tabelas e listas V i s ã o g e ra l d e d a d o s O p a d r ã o g e r a l d e d a d o s r e f e r e - s e a u m r e s u m o ou s u m á r i o d o c o n t e ú d o de uma t a b e l a. 48
Tabelas e listas L i s t a s a g r u p a d a s O a g r u p a m e n t o de l i n h a s p o d e t o r n a r os d a d o s d e u m a t a b e l a m a i s f á c e i s de r e s u m i r. 49
Tabelas e listas L i s t a s em c a s c a t a s A s r e p r e s e n t a ç ã o d o s d a d o s em á r v o r e s p o d e r i a n ã o ser bem e s p e c i f i c a d o em t e l a s de t e l e f o n e. A s l i s t a s em c a s c a t a p o d e m r e p r e s e n t a r a n e c e s s i d a d e d a e s t r u t u r a h i e r á r q u i c a. 50
BUSCAS, ORDENAÇÃO E FILTRAGEM 51
Buscas, ordenação e filtragem B u s c a a u t o c o m p l e t a r B u s c a s s a l v a s e r e c e n t e s F o r m u l á r i o de o r d e n a ç ã o F i l t r a g e m na t e l a F o r m u l á r i o de f i l t r o 52
Buscas, ordenação e filtragem B u s c a a u t o c o m p l e t a r O f a t o de d i g i t a r d i s p a r a de m o d o que o c a m p o p o s s a ser c o m p l e t a d o f o r m a n d o o r e s t a n d o d a p a l a v r a d i g i t a d a. U m a v e z c l i c a d o o l i n k r e d i r e c i o n a ao t e r m o p r o c u r a d o. 53
Buscas, ordenação e filtragem B u s c a s s a lva s e re c e n t e s U m a v e z já u t i l i z a d o a l g u m a p a l a v r a em b u s c a e s t a p o d e ser a c i o n a d a n o v a m e n t e a p a r t i r d o i n í c i o de u m a n o v a d i g i t a ç ã o d a p a l a v r a. 54
Buscas, ordenação e filtragem Fo r m u l á r i o d e o rd e n a ç ã o D i s p o n i b i l i z a ao u s u á r i o m a i s o p ç õ e s c o m u m f i l t r o de b u s c a a f i m de m e l h o r a r a a p r e s e n t a ç ã o d o s d a d o s p e s q u i s a d o s. 55
Buscas, ordenação e filtragem F i l t a r g e m na t e l a U m t o q u e p o d e d i s p o n i b i l i z a r u m f i l t r o e o r e s u l t a d o é a p r e s e n t a d o na f o r m a d e l i s t a s. 56
Buscas, ordenação e filtragem Fo r m u l á r i o d e f i l t ro U t l i z a d o em p e s q u i s a s m a i s a v a n ç a d a s. 57
CONVITES, FEEDBACK, AJUDA 58
Convites, feedback, ajuda D i c a Tr a n s p a r ê n c i a M e n s a g e m de e r r o C o n f i r m a ç ã o To u r 59
Convites D i c a P o d e ser u t l i z a d a em q u a l q u e r l u g a r d a t e l a. 60
Feedback t r a n s p a r ê n c i a N o r m a l m e n t e v i s t o em t e l a s i n i c i a i s. U m a t r a n s p a r ê n c i a é u m a c a m a d a c o m d i c a s i n i c i a i s na a b e r t u r a de t e l a s. 61
Feedback M e n s a g e m d e e r ro M e n s a g e n s de e r r o d e v e m ser e x p r e s s a s em l i n g u a g e n s s i m p l e s, i n d i c a r p r e c i s a m e n t e o p r o b l e m a e s u g e r i r c o n s t r u t i v a m e n t e u m a s o l u ç ã o. 62
Feedback C o n f i r m a ç ã o A c o n f i r m a ç ã o d e v e ser f o r n e c i d a q u a n d o u m a a ç ã o é t o m a d a. P r o c u r e u m a m a n e i r a de f o r n e c e r f e e d b a c k sem i n t e r r o m p e r o f l u x o d o u s u á r i o. 63
Ajuda To u r A a j u d a é n e c e s s á r i a s e m p r e que u m a p l i c a t i v o ou d i s p o s i t i v o n o v o é a p r e s e n t a d o. A u x i l i a os u s u á r i o n o v a t o s i n d i c a n d o a s p o s s i l i d a d e s n o u s o e a p r e s e n t a os c a m i n h o s a ser e x p l o r a d o.. 64
65
Referências - [ 1 ] N e i l, T h e r e s a P a d r õ e s d e d e s i g n p a r a a p l i c a t i v o s m ó v e i s T h e r e s a N e i l. S ã o P a u l o : N o v a t e c E d i t o r a ; S e b a s t o p o l, C A : O R e i l y, 2 0 1 2. 66