Excessive homepage treatment in release one...Illustrator CS4 One-on-One: Master with Deke...

4
Excessive homepage treatment in release one: Account management that can be deferred in phase I: Also can be deferred: new member registration and expired member activation: Think big, start small, focus on the core: a case study of a mobile site overdue Start Small Focus on the Core 1 / 4 Page

Transcript of Excessive homepage treatment in release one...Illustrator CS4 One-on-One: Master with Deke...

Page 1: Excessive homepage treatment in release one...Illustrator CS4 One-on-One: Master with Deke McClelland 02/11/2010 | Duration 01:12:21 | 6 transcript matches Fireworks CS4: Rapid Prototyping

Excessive homepage treatment in release one:

Account management that can be deferred in phase I:

Also can be deferred: new member registration and expired member activation:

Think big, start small, focus on the core: a case study of a mobile site overdueStart Small Focus on the Core

1 / 4Page

Page 2: Excessive homepage treatment in release one...Illustrator CS4 One-on-One: Master with Deke McClelland 02/11/2010 | Duration 01:12:21 | 6 transcript matches Fireworks CS4: Rapid Prototyping

Go search lynda.com, movies, tutorials

Course Listing: <Acrobat>

lynda.com

Home Subjects Software Vendors Authors

Sort by --Relevance--

Narrow your 55 results in <Acrobat>

Illustrator CS4 One-on-One: Masterwith Deke McClelland02/11/2010 | Duration 01:12:21 | 6 transcript matches

Fireworks CS4: Rapid Prototypingwith Jim Babbage02/11/2010 | Duration 01:12:21 | 6 transcript matches

Course listings 1-15 OF 55

Narrow your 55 results for "<Acrobat>" by:

VersionAcrobat 9 (25)Acrobat 8 (20)Acrobat 7 (8)Acrobat 6 (2)

[+] view more versions

Subject3D (4)Graphic Design (7)Photography (6)Web Design (3)

[+] view more software

TopicCreative Inspirations (6)Digital Photography (7)Print Design (7)Business Applications (3)

[+] view more vendor

My Training Log OutMy Account | |

One example of functionality deviation in visual design from the interaction design: filter treatment

Think big, start small, focus on the core: a case study of a mobile site overdueInteraction Design v.s. Visual Design

2 / 4Page

Page 3: Excessive homepage treatment in release one...Illustrator CS4 One-on-One: Master with Deke McClelland 02/11/2010 | Duration 01:12:21 | 6 transcript matches Fireworks CS4: Rapid Prototyping

A few examples of design changes from user research:

increased font size and header treatment

increased font size and header treatment

Increased row height and font size per usability testing:

!"#$%&

!"#$%&% %#'(")*!% +"!#,&-(.$*&% '/"0

#'()"*+

1*/(&$2(3*%2/*%(2"12!"#$%&%2456

*%

*%

!"#$%&'(!) *%+%,

-..)/'+$0,)

%"$(7222$&/&.%&+

!"#$%&'()"*&'+,-

./'01#2&345'%$64'7,8&

122 4896

34'5-$'%42 45:6

3".'%2 45;6

6"!'40!!2 4<=>6

20!'742 4<=96

2080+%&0,2 4?=6

9%50)(%5&"$'472 4<8=6

:;%$%7,-&;<2 4<@86

='.0%2 4<5<6

>0#)?)'4$0,-($'802 4:@?6

2%("504$-,'0!2 45:6

!"#$%&'()"*&'+,-

9/'01#2&345'$*$4$,%':$&;5'&<,=7%&'>&6$8*

'.!A2("2(")

B2/*%(2!"-(*-#&%

3.8-4(0.):;%$%!;%&)@

C"&2D.//&$E2F$#!&2G&.H*-2 @>7:@7;:2I2@8J:@@:

3,$'!$)A0,'0!)B'$;)9'++5-4)*",$'!

G*//,.-2K#$(*%2 @@78<7<82I2@:J:@@?

60,$)C%4,%<D)2'7'$-+):-'4$0,)-4.)E++"FFF

F&$(2D"-$"L2 I2@@7;?7@@2I2@;J:@<@

60<%4.)AG'4H)I%'47)200&0,)B'$;):;%FFF

M&&2N.$*%2 @57897<<2I2@=J:@@?

*%,0+2J3>)I,-&;'()A"'$0)K1)L!!04$FFF

D.$A2O'+&/-"#$2 <@78<75=2I2@:J:@@=

!"#$%&'()"*&'+,-

M"+0,)L!!04$'-+)N,-'4'47

D"$+L2P"/+*-02 I2@@7;97::2I2@<J:@@>

:;%$%!;%&)*A1)*%+%,)*%,,0($'%4

Q.R2Q.//L2 @97<575?2I2@=J:@@9

>%,G'47)B'$;)*%+%,

F$#!&2G&.H*-2 @;78;7;>2I2<@J:@@;

%3"S*-02<T<82"12<=9

1*/(&$2(3*%2/*%(2"12!"#$%&%24<=96 %"$(7222$&/&.%&+

-..)/'+$0,) *%

O:,08)))<222:2225222;2228222=2229222U222<<222<:222P0Q$R

!"#$%&

!"#$%&% %#'(")*!% +"!#,&-(.$*&% '/"0

!"#$%&

!"#$%&% %#'(")*!% +"!#,&-(.$*&% '/"0

!"#$%&'()"*&'+,-

?/'01#2&345'61#4"7$36'%$64'7,8&

*%+%,

2'7'$-+)'++"!$,-$'%4

2'7'$-+)'5-7'47

S-<%"$

:,'4$)?)&,0&,0!!

:,%T0($!

N<&%7,-&;<

>%,G/+%B

!"#$%&

!"#$%&% %#'(")*!% +"!#,&-(.$*&% '/"0

!"#$%&'()"*&'+,-

@/'01#2&345'61#4"7$365'>&6$8*5'A"%"-

M"+0,)L!!04$'-+)N,-'4'47

D"$+L2P"/+*-02 I2@@7;97::2I2@<J:@@>

:;%$%!;%&)*A1)*%+%,)*%,,0($'%4

Q.R2Q.//L2 @97<575?2I2@=J:@@9

>%,G'47)B'$;)*%+%,

F$#!&2G&.H*-2 @;78;7;>2I2<@J:@@;

1*/(&$2(3*%2/*%(2"12!"#$%&%2456 %"$(7222$&/&.%&+

*%!"#$%&'(!) *%+%,

-..)/'+$0,) *%

!"#$%&

!"#$%&% %#'(")*!% +"!#,&-(.$*&% '/"0

%"$(7222$&/&.%&+

!"#$%&'()"*&'+,-

B/'01#2&345'>&6$8*5'C"31=&*4,-$&6

'.!A2("2(")

B2/*%(2!"-(*-#&%

60,$)C%4,%<D)2'7'$-+):-'4$0,)-4.)E++"!$,-$%,

F&$(2D"-$"L2 I2@@7;?7@@2I2@;J:@<@

M'$)9'4,'(;!D)I,-&;'()20!'740,

V*(2G*-$*!3%2 I2@<7@@7@@2I2@:J:@<@

2"-,$0)20!'74D):,0!04$-$'%4)20!'74

W.-!L2X#.$(&2 I2@@78<7@@2I2@?J:@@>

N,%'G-U!)36*)6,-4.)*-5&-'74H)A$-,$)$%)V'W

Q$"*A.2X&%*0-2P$"#)2 I2@@7:<7582I2@<J:@@>

$%G'.%G'D)*;-,-($0,)E++"!$,-$%,

Y*,"-&2M&0-"E2("A*+"A*2 I2@<7@<7@@2I2@<J:@@?

D/'01#2&345'>&6$8*5'#%"8

!"#$%&

!"#$%&% %#'(")*!% +"!#,&-(.$*&% '/"0

Z3&(3&$2L"#[$&2)/.--*-02("2)#'/*%32.2#-*\#&2

%3"$(T$#-2-"H&/2.(2F/#$'2"$2-&&+2("2!$&.(&2.2'$.-+2

'""A21"$2L"#$2!",).-LE2X&%*0-*-02.2F""A2K"H&$2

G.-+%T]-2Z"$A%3")20*H&%2*-%($#!(*"-%2.-+2(*)%2

1$",2%&(#)2("2&-+1/.)%^

Q.0%72O+"'&2KYE2'""A2!"H&$E2_//#%($.("$E2_-X&%*0-E2W*0&/2

`$&-!3

a"%(&+2*-2+&%*0-2I2W"2K",,&-(%2b

c2]/+&$2d-($*&%2 W&S&$2d-($*&%2b

X.H*+2W*/&%2Z3*(&E2)$"+#!&$E2+"!#,&-(.$*&%

`$*+.LE2]!("'&$2:>(3E2:@<@

,"-./0"1+$2".3&#4$01+$5&#6.&"-.75081+9.!5:1;<.=5'&%6.>5%5+:4".!"#$%&"0

!"#$%&'()"*&'+,-

'.!A2("2(")

B2/*%(2!"-(*-#&%

Y*-!&2C.-#.$L2:@@?E2(3&2+"!#,&-(.$L2(&.,2.(2

/L-+.^!",23.%2'$"#03(2L"#2*-("2(3&2/*H&%2"12

&e&,)/.$L2!$&.(*H&2)$"1&%%*"-./%2("2.11"$+2L"#2.2

#-*\#&2"))"$(#-*(L2("2/&.$-2.-+2'&2*-%)*$&+2'L2

(3&*$2S*%+",2.-+2&e)&$*&-!&^2O1(&$2-&.$/L2(3$&&2

L&.$%2.-+2:520#&%(%2*-2(3&2K$&.(*H&2_-%)*$.(*"-%2

%&$*&%E2S&[$&2&,'.$A*-02"-2.2-&SE2$*!3&$2.))$".!32

("2(3&2%&$*&%2.-+2S&2!.-[(2S.*(2("2%3.$&2*(2S*(32

L"#f

g-(*/2-"SE2S&[H&2)$&%&-(&+2%3"$(E21"!#%&+2,"H*&%2

!"H&$*-02.2'$".+2%)&!($#,2"12(")*!%2(3.(23&/)20*H&2

*-%*03(2*-("2(3&2S"$A%).!&E2)$"h&!(%E2%("$LE2.-+2

)3*/"%")3*&%2"12(3&20#&%(%2S&[H&21&.(#$&+^2Z&[H&2

-"S2%3*1(&+2"#$2.))$".!32("21"!#%2"-2(&//*-02

#-*\#&2%("$*&%2*-2.2,"$&2*-T+&)(32.-+2)&$%"-./2

S.L̂ 2]#$20"./2*%2("2)$&%&-(2.2!"3&%*H&2%("$L2(3.(2

1/"S%21$",2'&0*--*-02("2&-+2S*(32.-2&-0.0*-02

-.$$.(*H&2%("$Li.2!",)&//*-02H*&S2*-("2(3&2/*H&%2"12

!$&.(*H&2*-+*H*+#./%2(3.(2(&//2L"#E2*-2(3&*$2"S-2

S"$+%E23"S2.-+2S3L2(3&L2'&!.,&2S3"2(3&L2.$&^2

Q3*%2.//"S%2#%2("2)$&%&-(2.2!",)/&(&2H*&S2"12"#$2

%#'h&!(%2.-+2.//"S%2L"#2("2&e)&$*&-!&2*(2(3&2%.,&2

S.L2L"#2S"#/+2.%2*12L"#[$&2S.(!3*-02+"!#,&-(.$L2

1*/,^2`"$2&.%&2"12H*&S*-02"-/*-&E2S&2.$&2"11&$*-02

(S"2S.L%2("2H*&S2(3&2+"!#,&-(.$L72.//2("0&(3&$2.%2

"-&2)*&!&2"$2.%2%,.//&$2%&!(*"-%24/*A&2XNX2

!3.)(&$%6^

Q"+.LE2S&2.$&2$&/&.%*-02"#$21*$%(2+"!#,&-(.$L2*-2

(3*%2-&S21"$,.(72X"L./+2j"#-0E2M"0"(L)&2

X&%*0-&$̂ 2`$",23#,'/&2'&0*--*-0%2*-2.2%,.//2Q&e.%2

.'"#(22 !"-(.!(

-&S2$&/&.%&%2 #)0$.+&

)$*H.!L2)"/*!L2 %*(&2,.)

(&$,%2k2!"-+*(*"-%2 1#//2%*(&

K")L$*03(2l<>>8T:@<@2/L-+.^!",E2_-!^2O//2$*03(%2$&%&$H&+^

2 searchZ3.(2S"#/+2L"#2/*A&2("2/&.$-m

3",&22222!"#T0($222222%"1(S.$&22222.#(3"$22222-&S

5<)$,-'4'472I2,L2.!!"#-(2I2/"02"#(

2 searchZ3.(2S"#/+2L"#2/*A&2("2/&.$-m

3",&22222!"#T0($222222%"1(S.$&22222.#(3"$22222-&S

5<)$,-'4'472I2,L2.!!"#-(2I2/"02"#(

.'"#(22 !"-(.!(

-&S2$&/&.%&%2 #)0$.+&

)$*H.!L2)"/*!L2 %*(&2,.)

(&$,%2k2!"-+*(*"-%2 1#//2%*(&

K")L$*03(2l<>>8T:@<@2/L-+.^!",E2_-!^2O//2$*03(%2$&%&$H&+^

.'"#(22 !"-(.!(

-&S2$&/&.%&%2 #)0$.+&

)$*H.!L2)"/*!L2 %*(&2,.)

(&$,%2k2!"-+*(*"-%2 1#//2%*(&

K")L$*03(2l<>>8T:@<@2/L-+.^!",E2_-!^2O//2$*03(%2$&%&$H&+^

E/'01#2&345'%,*C63,7&':$&;'&<,=7%&

;%50222222222222222%#'h&!(22222222222222222%"1(S.$&22222222222222.#(3"$222222222222222-&S

2 searchZ3.(2S"#/+2L"#2/*A&2("2/&.$-m

5<)$,-'4'472I2,L2.!!"#-(2I2/"02"#(

2 searchZ3.(2S"#/+2L"#2/*A&2("2/&.$-m

3",&22222!"#T0($222222%"1(S.$&22222.#(3"$22222-&S

5<)$,-'4'472I2,L2.!!"#-(2I2/"02"#(

.'"#(22 !"-(.!(

-&S2$&/&.%&%2 #)0$.+&

)$*H.!L2)"/*!L2 %*(&2,.)

(&$,%2k2!"-+*(*"-%2 1#//2%*(&

K")L$*03(2l<>>8T:@<@2/L-+.^!",E2_-!^2O//2$*03(%2$&%&$H&+^

2 searchZ3.(2S"#/+2L"#2/*A&2("2/&.$-m

3",&22222!"#T0($222222%"1(S.$&22222.#(3"$22222-&S

5<)$,-'4'472I2,L2.!!"#-(2I2/"02"#(

.'"#(22 !"-(.!(

-&S2$&/&.%&%2 #)0$.+&

)$*H.!L2)"/*!L2 %*(&2,.)

(&$,%2k2!"-+*(*"-%2 1#//2%*(&

K")L$*03(2l<>>8T:@<@2/L-+.^!",E2_-!^2O//2$*03(%2$&%&$H&+^

2 searchZ3.(2S"#/+2L"#2/*A&2("2/&.$-m

3",&22222!"#T0($222222%"1(S.$&22222.#(3"$22222-&S

5<)$,-'4'472I2,L2.!!"#-(2I2/"02"#(

.'"#(22 !"-(.!(

-&S2$&/&.%&%2 #)0$.+&

)$*H.!L2)"/*!L2 %*(&2,.)

(&$,%2k2!"-+*(*"-%2 1#//2%*(&

K")L$*03(2l<>>8T:@<@2/L-+.^!",E2_-!^2O//2$*03(%2$&%&$H&+^

2 searchZ3.(2S"#/+2L"#2/*A&2("2/&.$-m

3",&22222!"#T0($222222%"1(S.$&22222.#(3"$22222-&S

5<)$,-'4'472I2,L2.!!"#-(2I2/"02"#(

.'"#(22 !"-(.!(

-&S2$&/&.%&%2 #)0$.+&

)$*H.!L2)"/*!L2 %*(&2,.)

(&$,%2k2!"-+*(*"-%2 1#//2%*(&

K")L$*03(2l<>>8T:@<@2/L-+.^!",E2_-!^2O//2$*03(%2$&%&$H&+^

MOCKUP: Mobile subject pageNote: 7 mockups

design approvedmockup date: 11-22-10

need new artwork (mobile only not full site)

tab color:bottom color on the gradient should match below

tab color:bottom color on the gradient should match below

tab color:bottom color on the gradient should match below

tab color:bottom color on the gradient should match below

F&&7'4)&'$*C$3,4&C'$4&=6',%$8*&C'%&G4'"-'-$8)4'H*"4&C'#&%";I',*C',%%";'4)&'-&64'"G'4)&'7,8&4"'3&*4&-',*C'-&6$J&/

lock

lock

lock

lock

lock

lock

lock

lock

32px

increased footer font size and line space

redesigned pagination

Before:

Think big, start small, focus on the core: a case study of a mobile site overdueTest Early & Test Often

3 / 4Page

Page 4: Excessive homepage treatment in release one...Illustrator CS4 One-on-One: Master with Deke McClelland 02/11/2010 | Duration 01:12:21 | 6 transcript matches Fireworks CS4: Rapid Prototyping

User study also indicated that mobile app users' user familiarity to expect tappable rows is migrating to mobile sites: a site wide effort to make the entire row tappable when applicable was initiated after the findings were concluded:

Think big, start small, focus on the core: a case study of a mobile site overdueTest Early & Test Often (cont'd)

4 / 4Page