ALFONS HUDESCU Associate Creative Director, Experience Design
Interactive Design Process Concept Development & Strategy Information Architecture User | Functional Flows Design Specifications Web Applications | Architecture & Interface Design Mobile Applications | Interface Design Usability Guidelines
USER EXPERIENCE The lasting impression formed while interacting with a system's various attributes: functional features | content | information layout | navigation | visual design | interface behavior are shaped by all the emotional responses to the brand message, content, visual impact and usability of the system. also implies the user's active participation with the system through the services offered. They are not limited to the "visible" layer and include interaction with other systems and requirements related to security, performance, reliability.
Translate business concepts or vision into: concrete requirements visual/interaction designs designs specifications Analyze user needs and define a corresponding digital experience by applying a mix of strategic, creative and technical skills
INTERACTIVE PROCESS
INTERACTIVE DEVELOPMENT PROCESS
+
Analysis [ Problem Seeking ] Exposure
Approach
Holistic Structured Humancentric
Deliverables
REVIEW / ANALYSIS: - Business Requirements - Communication Strategy - Client Wish-list - Market / User Research Identify Mission/business Objectives Usability Evaluation Consumer Requirements Definition Human Factors Requirements Definition CS
+ Synthesis [ Problem Solving +
IDEATION - Conceptual Design Sessions - Scenario Exploration/ development
PLANNING - Content Structure Modeling - Navigational Planning - Content Management Planning
IA Concept Development User Modeling User Task Analysis Use Case Modeling Functional Requirements Definition
Site Architecture Development
+
I mpleme nt
+
Solution
UI Analysis
Review Site Build
Information Design
Validate
Interaction Design
Issue Resolution
Navigation System Design Contextual User Flows Modeling
C
C CS
AUDITS [ FUNCTIONAL/COMPETITIVE ] HEURISTIC EVALUATION REQUIREMENTS ANALYSIS BASELINE REQUIREMENTS DOCUMENT
Design
]
Statement
T
C [ Establish Project ContextT& Focus ]
Execute
Architect
+
Activities
IA
Specify
Defin e
Explore
CONCEPTUAL IA [INCLUDING RATIONALE] TASK ANALYSIS DOCUMENT USE CASES & REQUIREMENTS DOCUMENT
+
T
C
CS
IA RATIONALE DOCUMENT FINAL INFORMATION ARCHITECTURE USER/PROCESS FLOW DOCUMENT
+
T
T
C CS
CS
UI DESIGN SPECIFICATIONS [FUNCTION / RELATIONSHIP / BEHAVIOR] - OVERVIEW DOCUMENTS [high-level] - REFERENCE DOCUMENTS STYLE GUIDE [UID]
+
+
+
Dependencies Diagram IDENTIFY BUSINESS OBJECTIVES DEFINE USER REQUIREMENTS INITIAL TECHNICAL ASSESSMENT
USER TASK ANALYSIS
SITE ARCHITECTURE DEVELOPMENT
INFORMATION DESIGN
SITE BUILD REVIEW
USE FLOWS
INTERACTION DESIGN
ISSUE RESOLUTION
NAVIGATION SYSTEM DESIGN
IA CONCEPT DEVELOPMENT USE CASE MODELING
SYSTEM & APPLICATION ARCH.
APPLICATION DESIGN SPECIFICATIONS
PAGE BUILD CYCLE APPLICATION BUILD CYCLE
DEFINE TECHNICAL SCOPE
REQUIREMENTS SPECIFICATION
WEB PUBLISHING ARCHITECTURE
DATA MODELING INTEGRATION CYCLE WEB PUBLISHING SPECIFICATIONS XML SCHEMA
Validate
HIGH-LEVEL UX PROCESS
UNDERSTAND CONTEXT
Digital Strategy Review Brainstorming Client Consultation Profile Target Users
ESTABLISH SCOPE
Content Analysis Define Personas Define System-Wide Attributes Define Requirements
DEVELOP IA
DESIGN
CREATIVE CONCEPT
UX Map Content Architecture Contextual User Flows User Tasks Analysis Use Cases
FINALIZE CONCEPT
User Interface Design Navigation Design Interaction Design Functional Specifications Prototype Testing
SPECIFICATIONS
SUPERCOMPS+COPY
+
STYLE GUIDE
CONCEPT & STRATEGY
CONCEPT VISUALIZATION
USER ENGAGEMENT MAP
USER ENGAGEMENT MAP
USER JOURNEY
AUTOMOTIVE SHOPPER: DECISION-MAKING PROCESS
PERSONA
INFORMATION ARCHITECTURE
IDEATION
CONCEPT ARCHITECTURE
Member Account
mypedigree.ca Content Pillars
HOMEPAGE 1
Pups+Dogs
2
3 Adoption
4 Community
PUPPIES
BY CATEGORY
EARLY STAGES
PEDIGREE® CLUB
ADULT DOGS
BY LIFE STAGE
CHOOSING YOUR DOG
PUPPY MILESTONES
SENIOR DOGS
NUTRITION FACTS
AFTER ADOPTION
POSTCARDS/VIDEOS
BREED GALLERY
NUTRITION RESOURCES
SHARE YOUR STORY
FORUMS
FAQ
Tools
Dog Food
FAQ
OFFERS
STORIES
SEARCH Filters + Keyword SELECT-A-DOG Fetch A Name
Adopt-O-Dex
Glossary
Find A Shelter
Age Calculator
A Dog’s Life
Communication
Campaigns | News | Events | Ask An Expert | E-mail Alerts | Contact Us
Online Extensions RSS Feeds
Google Mash-ups
Podcasts
Wiki-Pedigree
Widgets
Facebook | Dogbook | iGoogle |
CONTENT RELATIONSHIP DIAGRAM
downstream flow
contextual flow
1 2
Search
MEAL IDEAS RECIPES
PRODUCTS Health& Nutrition
Eating Well
Products 3
Learning
downstream flow
contextual flow
1 Search
2
RECIPE Save Rate Submit Recipe
PRODUCT Health& Nutrition
Products 3
Meal Ideas Learning Content Hierarchy Primary Secondary Tertiary
SITE ARCHITECTURE HOMEPAGE
0.0
GLOBAL FUNCTIONS
programs
d
articles
d
<Episode> [3]
P1
Wet Food Whiskas Cuts
P2.1
Whiskas Pate
P2.2
Whiskas Bites
P2.3
Cat Milk
P3
New Treats
P4
Kitten Food
P5
Food Guide
T1
SLOW-MO CATS
<Episode> [4]
by Ingredient T1.1
Search Search Results
Latest Episodes C0.n
Understanding Your Cat
3
<Episode> [3]
C1.1
Choosing A Name
C1.2
Home is where the scent is
C1.3
On the hunt
C1.4
Sleep
C1.5
Good habits for owners
C1.6
Cat Lovers Live Longer
C1.7
8
M1.1 > M1.n
r Photo Album CANDID CAT VIDEOS
J
M2.1
T3
> M2.n
M3.1
C1
> M3.n
In Detail
NOTES
Cat's Well Being Grooming Your Cat House Training Your Cat Clean Cats, Happy Cats
C2.1
..your cat's teeth clean
C2.4
C2.2
MEDIA UPLOAD Video
C2.3
1
Manufacturing Process Whiskas Quality The Whiskas Team
2
What Should My Cat Be Eating? Is My Cat Overweight? Is My Cat Allergic? What Are Healthy Treats?
3
Tail talk Playtime The hunt Night Sight
4
Welcoming a New Kitten Feeding Time Caring for Your Kitten Kitten Proofreading
5
Introduction to Adalbert and his cat, Tricks Dr. Adalbert’s analysis series
6
TYPICAL CONTENT Description Varieties r i i Daily Feeding Guide AAFCO Statement i r i TOTAL HEALTH
7
whiskas.com/about_cats/article.aspx?aid=19 whiskas.com/about_cats/article.aspx?aid=83 whiskas.com/about_cats/article.aspx?aid=87 whiskas.com/about_cats/article.aspx?aid=31 /whiskas.com/about_cats/article.aspx?aid=53
MV FORM
Photos
MP FORM
Playing Games
C3.1
Rewards| Reprimands
C3.2
Hidden Dangers
C3.3
If Your Cat Could Talk
C3.4
CAT QUIZ CORNER
Detalis
T6
Interactive Tool WALTHAM® S.H.A.P.E™
Stories
MS FORM
LEGAL
i
ML In Detail
ASK A CAT
T6
Interactive Tool T7
PDF File
CAT MAIL Register
CAT MAIL
11
Register
11
Contact Us
Product List
TOTAL HEALTH SYSTEM
MEMBER SIGN IN REGISTER
Videos
CANDID CAT STORIES
i
S1.n
Results [list]
5
M0.n
CANDID CAT PHOTOS
Choosing your Cat
10
+ Share This
M0
CAT WHISPERER
Lifestyle
Product Selector by Preference
News story
COMMUNITY
PROGRAMS
Latest Episodes P0.n
Dry Food
tools
C0
d
V
Latest Episodes
r i
CAT CARE
PROGRAMS
INSIDE THE PLANT
i
V
P0
V
PRODUCT
PROGRAMS
CAT MAIL
11
Register
11
i
USER | FUNCTIONAL FLOWS
USER FLOW
REGISTERED / NOT LOGGED-IN
C
SIGN OUT
Logged-in
SIGN IN
x
x
SIGN IN Email
Password SIGN IN
Remember Me O Forgot Password?
update profile
+
Not Registered? Click here O
connected?
N x
CONNECT TO FACEBOOK
Logged-in
C
Connected
f
Campbells
You'll be able to post your activity in your Facebook feed. No, thanks!
C Logged-in
POST COMMENT
x
x
SIGN IN Email
Password
Remember Me O Forgot Password?
SIGN IN
Logged-in
C
Connected
f
Not Registered? Click here O
+ Add Comment
CLOSE
x
Campbells
Comment:
Login with Facebook Connect to post the comment on your Facebook profile.
POST
Logged-in
C
Connected
f
SIGN OUT
USER FLOW Login
ConnectID Sign-In
ConnectID REGISTRATION
Email Confirm Email Password Confirm Password Security Question Security Answer Postal Code Age [must be over 13] Terms & Conditions Checkbox & link to popup Display Captcha / Type Captcha
1
Prefix First Name Last Name Apt/Suite Street Number Street Address City Province Postal Code [pre-filled] Daytime Phone Evening Phone Mobile Phone
2
What is your favorite gaming device to play on? select one How long have you been playing video games for? enter number value Have you ever competed at a video game tournament such as Major League Gaming, WCG and/or Halophax? select one Do you have an Xbox Live Gamer Tag? select one What is your highest level achieved in Halo 3 (overall levels)? select one What is your rank on Halo 3 MLG Playlist? select one If accepted, are you willing to commit yourself to the team and play video games as a full time job? select one
R1
Account Contact Form Us Next
A
Y
display errors
over 13
N
Denied Close
R2 Form
Next Errors ?
Y
display errors
Gaming Experience Next
Forgot Password
Enter Password Login
R1.1
Errors ?
Y
Y
Mange Profile
R3
Account Info
L3
Password
Save
Security Question
Save
Contact Details
Save
back L1
display errors
3 Errors ?
display errors
R4
Verify Info
Opt-in Select back L1
Account Info
Confirmation
L2
Opt-in Options
Opt窶進n Options
Edit
display errors
ConnectID Hub
confirmation Errors ?
c
Delete Profile
3
3
Form
Register
Enter Email
Errors ?
Details
B
L1
Login
1
Message + TC
CAS Global Opt-in Select the Event You Want To Register For select one city Check here if you prefer to play online -------------------------------------------------------------------------------------------
A
User Account
SUBMIT
R5
Thank You Message CLOSE
confirmation
L4 Save
Y
INTERFACE DESIGN
INTERFACE DESIGN : CONCEPT
Page ID: 0.0
studies 2 SEARCH
SHAW.CA
TELEVISION : Cable
Digital
On Demand
Products Television 4 Digital Phone 4 Internet 4 Customer Care 4 Investor Relations 4 Contact Us 4 ---------------------------BUSINESS SOLUTIONS
MY SHAW.CA
TV Support
TELEVISION r
r
Contextual Support Tools
Canadian TV New Channels Survivor Two Great and Youfrom CBC Micronesia
r Two Great New Channels from CBC
CHANNEL LINEUP
PROGRAM GUIDE
r SUPPORT [TV]
Enjoy Free Preview THE SOPRANOS MENU
CABLE TV
ID
Shaw Cable TV is your connection to classic entertainment.
Basic
Classic
DIGITAL TV
ID
More choice, more control, more entertainment. HDTV ID The future of television
Š 2008 Shaw Communications. All Rights Reserved.
+
PLAY TRAILER
SHAW ON DEMAND
Bundles & Pricing
ID
Video on Demand VOD
Subscription VOD
Pay Per View
Take control over the way you watch TV ID
Watch movies and shows from premium channels
Enjoy private telecasts of exclusive events ID
+
Specialty Channels
ID Terms Of Use Privacy Policy
Set My Locale Contact Us
INTERFACE DESIGN STUDIES
Page ID: 0.0
LOGGED-IN
Shaw Rewards Travel Kids Corner Teen Scene Shopping Gaming Corner
Welcome, Ray! Video On Demand
VIDEO ON DEMAND
News
Lifestyle
National Local World Sports Entertainment
r
NOW PLAYING
Tech Stuff
+
SHAW.CA
SEARCH
Personalize Home Page ?
Shaw News X VIDEO ON DEMAND NEWS FEEDS s p e c i a l s Local Coen Bros. Double Bill ID LIFESTYLE A double dose of the Coen National TECH STUFF brothers with No Country For Old Men and The ManInternationa Who UTILITIES Wasn't There in this special
r
bill on Shaw Video On + Add Feed double Demand.
+
PLAY TRAILER
X
WORLD NEWS
ID
i August 9: Service Canada warns of currently circulating phishing e-mails.....MORE
Russia's parliament has approved former President Vladimir Putin as the new prime minister......MORE
August 9: Announcing Television Channel Line-Up Changes.....MORE
Nepal reopens Mount Everest to climbers on its side after a Chinese team carries the flame to the summit......MORE
August 8: CRTC Heading in the Wrong Direction.... MORE
r
r
SPORTS ID
ID
Enjoy Free Preview of Speed Channel
Tuesday
ID
+ <MODULE>
ID
Wednesday
Max:15º Min:11º
V
X
V
X
Friday
Max:15º Min:11º Detailed Forecast
X
V
i
TV LISTINGS
+ <MODULES>
Assessing the global food crisis: A silent tsunami which knows no borders.... MORE Move
SHAW Auction Corner
Two Great New Channels from CBC
X
Sports Tuesday, August 18 Entertainment 2008 Financial CALENDAR Technology
Order Online V
ID
Online Support
Max:15º Min:11º
+ Top 10 VOD Movies SHAW NEWS
My Account
WEATHER
Dumb & Dumber Double Bill ID Dumb & Dumber and Dumb & Dumberer for one special price on Shaw Video On Demand.
Minimize
SHAW PHOTO SHARE SHAW MUSIC
l
Financial Technology
+
SHAW WEBMAIL SHAW VIDEO MAIL
V
X
V
X
WIREFRAMES LOGIN HOME | PRODUCTS | MEN'S GROOMING | EXPERIENCE |
PROMOTIONS |
SHOP NOW i
REGISTER
ESPANYOL
SEARCH....
PRODUCTS> SHAVING> PRODUCT NAME B
HTML
<LOGO> <FUSION MVP>
r
1
ADD REVIEW
ASK A QUESTION
x
Have your say. Login and review now MVP IN ACTION Email Address*
2
DETAILS
1
LOGIN EXPERIENCE MVP
RATINGS & REVIEWS
n.n BUY NOW FORGOT PASSWORD
Q & A
4
RATE IT
+
Best Razor I've Ever Owned The best razor I’ve encountered. It has three blades and works better than any razor I’ve ever used. I see no reason to switch to another razor as long as I live. Gillette has perfected the razor with the Mach 3 Turbo. Yes it is better than the regular Mach 3. R. Federer | <month><DD>,<YYYY> AGREE [2]
DISAGREE [1]
n. n ASK A QUESTION
ADD REVIEW
Write Review*
DISAGREE [1]
r
ADD REVIEW
The best razor I’ve encountered. It has three blades and works better than any razor I’ve ever used. I see no <Have your reason to switch to another razor as long as I live. Gillette has perfected the razor with the Mach 3 Turbo. Yes it is better than the regular Mach 3. Title R. Federer | <month><DD>,<YYYY> AGREE [2]
| NOT REGISTERED? SIGN-UP NOW
R
<Gillette Fusion MVP><H1> <Rating & Reviews><H2>
3
2
Password*
FUSION MVP POWER MANUAL C
r
say>
max. 1000 chars. TBD Lorem ipsum doloret si amet quod erad demonstrandum lorem ipsum doloret si amet quod erad n. LEARN MORE n Cancel SUBMIT
1 2 3
F <PRODUCTS>
f Become A Fan
> GILLETTE SCIENCE > PRODUCT LINEUP > PRODUCT COACH
GILLETTE.COM : PRODUCT PAGE
<MEN'S GROOMING> > STYLING VIDEOS > FIND YOUR STYLE > GROOMING GLOSSARY
<ABOUT GILLETTE> > IN THE NEWS > RESOURCE CENTER > CONTACT US
<SHOP GILLETTE> SHOP NOW ART OF SHAVING GILLETTE VENUS
SELECT COUNTRY
x
WIREFRAMES ID: 1.0 M
Home | Francais | RBC.com search
H
RBC Advice Centre HOME
Q&A
PORTRAITS
C
<Your online resource for insightful advice from RBC's top financial thinkers> ADVISORS
EVENTS
RESOURCES QUICK LINKS OTHER FINANCIAL PORTRAITS...
<FINANCIAL PORTRAITS>
r
r
JOHN SMITH Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit....
r
Comments by <Patricia Croft>, <John Doe> Read More
r
<Share Your Story>
Lorem ipsum dolor sit amet elit, consectetur adipisicing elit. Lorem ipsum dolor sit amet elit, consectetur adipisicing elit. Send profile
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Read More Lorem ipsum dolor sit amet, consectetur adipisicing elit. Read More View All
P1.1
1 N
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Read More
DAY-TO-DAY FINANCES
SAVINGS & INVESTMENTS
MANAGING & REDUCING DEBT
MY BUSINESS
Filter by...
Your Saving & Investments Questions. Our Answers.
LATEST ARTICLES
Patricia Croft | December 31, 2008 If I have a little extra money what should I do with it?
POPULAR TOPICS LATEST COMMENTS
P1
2
View All S1
Latest Videos
B1.1
Patricia Croft | December 31, 2008 Welcoming in 2009towith a review of funds? 2008 Should I continue invest in mutual
Patricia Croft | December 31, 2008 What investment advice would you give to someone who plans to retire in 5/10/15+ years? Patricia Croft | December 31, 2008 Now rates are so low should I switch from a variable to a fixed mortgage?
Watch All Savings&Investment Videos
Get To Know Our Advisors r
r
r
r
r
r
r
r
AB1[8] A1[8]
<NAME><NAME> <TITLE> my expertise my latest advice
RBC.COM : ADVICE CENTER
<NAME><NAME> <TITLE> my expertise my latest advice
<NAME><NAME> <TITLE> my expertise my latest advice
<NAME><NAME> <TITLE> my expertise my latest advice
<NAME><NAME> <TITLE> my expertise my latest advice
<NAME><NAME> <TITLE> my expertise my latest advice
<NAME><NAME> <TITLE> my expertise my latest advice
<NAME><NAME> <TITLE> my expertise my latest advice
UI DESIGN
MULTI-BRAND DESIGN SYSTEM
DESIGN SPECIFICATIONS
UI DESIGN SPECIFICATIONS Template TM24-1 Phase
Cadence
Intro
Introduction
T0
Welcome
T1
Invite
Intender FTN, COM, DEF
T4
Motivate /Relationship
1
+3
TM0
+2
TM0
+1
TM0
0
TM3 / TM3-1
4
TM7 TM7
[Toolkit ] 6
TT6
7
TM7
Required
ID:
B
Sidebar
<TITLE>
If exists
<copy> …..... >
TM12
12
TM12
C
ID: <Image> [max] 100 X 30 px If applicable ID: <Image> [max] 100 X 30 px If applicable
TM15-1 4
OT
ID:
OT1 [or OT1<copy> 2]
<TITLE>
<TITLE>
Required
<link>
<copy> …..... >
15
TM15
TM15-1
<link>
16
TM-A
TM-A
GW1-2, GMV4, GMA3, MI1
17
TM-A
TM-A
23
TM-A
TM-A
F21
24
TM24
TM24-1
F22
<Top of page>
< UNSUBSCRIBE >
< Legal>
<copy>
<copy> …..... >
TM15-1
TEMPLATE SPECIFICATIONS
Required
<TITLE>
Privacy Policy
B
<graphic> C1 or C2 or C3 or C4 or C5
TM15
F1
Required
P ID:
<copy> …..... > <link>
14
F
OT1
GW offer <graphic>
1
<link>
3
Ci <Content index> 1. <title> Lorem Ipsum 2. <title> Lorem Ipsum 3. <title> Lorem Fixed size: 200 px Ipsum n. <title> <Message>
A
ID: <Image> [max] 100 X 30 px
8
TM15
OT6 or OT4
<copy> [Update]/[create] profile in MyGM…..some copy > 2
TAF
Tell A Friend
ID: G5
UP
TT3
5
[Header image]
<copy> Welcome |name first,last| ……….some copy >
TM3
13
G
Required
Fixed size: 590Fixed X 100size: px 590 px
Branding
[Toolkit] 3
Browse
[Header picture]
H
inactivate
Buy 1
Shop
From:< > Subject: < > To: < > Date: < >
0
Past EPD +4
Motivate
Intender/ Owner LES, PUR, LBO. GMU
Required
<copy> <copy>
F31
< Contact GMCanada>
Variable
Program Opt-in
F32
< Visit GMCanada.com>
CONTENT MODULES SPECIFICATION
PO [Program Overview]
B [Brand]
After Purchase
Own
Opt-in
Opt-in Request
GM Relationship
Y Y Inten t
PO3
Own
Intent
PO1
Y GM
PO4
R1
i1
GMV1
B2
Bi2
R2
i2
GMV2
B1
BCS
R1 R2
B1
R1
B2
R2
GW [Goodwrench]
Vehicle Intent [Survey/Inferred] Own
Bi1
GMV3 CSI
GW1
Intent
GW4
GMA [GMAC] Own
GMA4
Intent
GMA1
GW2
GMA2
GW3
GMA3
GW5 VD1
Bi1
i1
Bi2
i2
BCS
GMV4
GMV1
GMA3
GW4
GMA1
GMV2
GMA2
CSI
GMV3
GMA3
VD2
GMV4
GMA3
PO5
ADAPTIVE TEMPLATES COMPONENT ASSIGNMENT LOGIC
GMV [GM Card]
B1
B2
Y
Inten t
Intent
GM
PO2
Y
V [Vehicle Information]
FUNCTIONAL SPECIFICATIONS 1. 1
Template: TM12 – Motivate: Browsing phase (8-12 months) R E GI O N ID: B Brand M es sa ge
COMPONENTS ID :
B1 o r B2 o r BO
Priority 2 Specifications
R E GI O N
1. Priority rules: A. Message selection based on assigned priority flags, driven by start/end date B. Component BO has the highest priority, if exists 2. Same component will not be selected in consecutive months, unless: A. Component is start/end date driven (event, promo, etc) and selection is required for consecutive months (apply rules described in Corporate Messages/Events section- page Error! Bookmark not defined.) 3. If brand messages do not exist, REGION B not displayed
ID: V
COMPONENTS ID :
V ehi c le Inf o rm atio n i1 o r i2 o r C SI o r V D1
Priority 3 Status
Required (follow selection cadence)
Specifications
1. Selection cadence rules: A. Select i1-1 at 12 and 8 months prior to EPD B. Select i1-2 at 11 months prior to EPD C. If paragraph i1-2 does not exist, replace with paragraph i1-1 D. Select i2 if only intended <make> declared, at 12,11 and 8 months prior to EPD E. Select CSI if intended <segment> declared, at 12, 11 and 8 months prior to EPD
Reference See page Error! Bookmark not defined.: “Component Matrix: vehicle Information” for component specifications R E GI O N
ID: ST
COMPONENTS ID :
Sho ppi ng T oo ls ST 2 or ST 1 o r ST 6 o r ST 5
Priority 4 Status Specifications
Required (follow selection cadence) 1. Select one paragraph/cadence. ST2 -12and 8 months (prior to EPD) ST1- 11 months ST6 – 10 months
Reference See page Error! Bookmark not defined.: “Component Matrix: Purchase tools” for component specifications
APPLICATION DEVELOPMENT
CONCEPT VISUALIZATION
INTERFACE DESIGN
DESKTOP DASHBOARD
WEB INTERFACE DESIGN
COLLABORATIVE PUBLISHING
WEB INTERFACE DESIGN
MUSIC SHARE
PHOTO SHARE
WEB INTERFACE DESIGN
PROJECT DASHBOARD ENTERPRISE VERSION
WEB INTERFACE DESIGN
ASSET MANAGEMENT DETAIL
APPLICATION DESIGN
SYNCAPSE PLATFORM PERFORMANCE REPORTING
APPLICATION DESIGN
SYNCAPSE PLATFORM INTERFACE DETAILS
APPLICATION DESIGN
SYNCAPSE PLATFORM TWITTER STREAM MANAGEMENT
APPLICATION DESIGN
SYNCAPSE PLATFORM REPORTS DASHBOARD
APPLICATION DESIGN
TOUCH SCREEN INTERFACE (WEB)
APPLICATION DESIGN
TOUCH SCREEN INTERFACE (WEB)
MOBILE INTERFACE DESIGN
MOBILE DESIGN
PERSONAL BANKING CREDIT CARD APPLICATION
IPHONE APP : CONCEPT DESIGN
GILLETTE MOBILE SHOPPING
USABILITY GUIDELINES
ACCESSIBILITY FOR PEOPLE WI T H C O L O R - D E F I C I E N T V I S I O N
In accessibility terms, it is of no interest that a colourblind person might see a solitary block of colour on a web page as something other than its intended red, green, or other confusable colour. Hues perceived in isolation, with no meaning attached to them, are not of critical importance. Photographs can be exempt from accessibility considerations for colourblind visitors. The fact that a colour-deficient person doesn't see a photograph the way a colournormal person does is largely irrelevant, unless the whole purpose of the photograph is to differentiate one part from another, and those parts appear in confusable colours. Designers must acknowledge the fact that emotional or esthetic impact are not the same as meaning in this particular context. Meaningful [critical] Objects on the page need to be unambiguous. Text | Links | Navigation [HTML text and/or graphics] | Graphical Interface Elements [buttons] DESIGN CONSIDERATIONS Color must not be the only means of conveying information. Don't use confusable colours for meaningful UI objects. Ensure that all information that is conveyed with Color is also conveyed by another means. Avoid labels/instructions such as : "all required fields are marked in red" Avoid using icons that differ only in their colour Foreground and background colour pairs must have sufficient contrast so as to be clearly distinct. The W3C suggests that two colors provide good color visibility if the brightness difference and the color difference between the two colors are greater than a set range: color brightness : >12 | color difference : >500
Online Colour Evaluation tool: http://soap.stanford.edu/show.php?contentid=54
ADDRESSING THE ISSUE OF THE PAGE FOLD EVIDENCE FROM USER TESTING The fold is not a single location, but a broadly dispersed distribution with three peaks located at roughly 430, 600 and 860 pixels. These peaks correspond to the three most popular screen resolutions used today: 800×600, 1024×768 (90% of users) and 1280×1024. Depending on the screen size, users will typically see at least 430 and up to 860 vertical pixels worth of information on their screens when they open their site, without having to scroll. Visitors are equally likely to scan the entire page no matter the page size. Scrolling has become a natural practice in surfing the web. Scrolling is also associated with [and influenced by] web 2.0 design because big, clear text and “spacious”, “clean” content implies longer web pages. Scrollbars size and position are clear cues to page length: they are used to assess the amount of content on a page, and how much of that content is located below the fold. One of the most common things seen on a heatmap is a strong hotspot over the scrollbar. Users expect to have to scroll. Less content above the fold encourages more exploration below the fold. The screens show two different design treatments for the hero slot (the large, prominent image area) on the homepage. The heatmap indicates that actually having less clutter above the fold (one large content block as opposed to 2 smaller ones) encouraged exploration below the fold
CONTACT
2alfons@gmail.com
https://www.linkedin.com/in/ahudescu https://issuu.com/alfonshudescu/docs/portfolio/