template research
DESCRIPTION
A slide presentation on preliminary research of application templates for Windows 8.1. By conducting competitor research, the study of four different app categories enables the summary of their goals and most characteristic elements.TRANSCRIPT
Template researchFor windows 8.1
Education | Music & Video | Photo | Travel
Educational app
TED application
OutlineA platform for ideas worth spreading from science until global issues, in 100 languages. TED organizes events all over the globe.
GoalEducate and bring multicultural people together through science.
Target groupAll ages
Feelings Trust, seriousness
Interface and navigation design
Splash screen: simple | light background color | logo
Font: bold-capital titles | light-thin descriptions | up to 3 fonts
Controls: bold-capital titles | light-thin descriptions | up to 3 fonts
Navigation: scroll from top-bottom and left-right
Layout: grid oriented
App type: rational
Splash screen
Main Screen | large images and bold titles
Discrete next-previous buttons |Button bar to indicate the page number
Grid layout | organized in sections | separators
Video screen (distinct dark section | large play control | bold title)
Two video layouts
Back | Play button
Suggested links have a grid layout
Navigation
Scroll right | left Scroll up | down
Article links open explorer
Mouse hover-over title, reveals information
Right click introduces a specified search panel
Main page
Video selection
Wireframes
Promoted style
• Bold, beautiful, readable
• Content focused
• Fast and fluid
Accessibility
• Scroll’s up and down with keyboard controls and space bar
• Doesn’t play video with keyboard controls
Quality feature (solution)
• Visible interactive transcript
Guidelines
• Structure consistent
• Immersive & responsive
• Content focused
Evaluation & Feedback
• Good UI
• Great Content
• Well designed
Music & Video app
Shazam application
OutlineAn app which recognizes music and TV, while connects 500 million people with each-other.
GoalHelp people recognize and engage with the world around them.
Target groupAll ages
FeelingsAppealing, fun
Interface and navigation design
Splash screen: dark-blue background color | name-logo
Font: light-thin descriptions
Navigation: scroll from top-bottom and left-right
Layout: simple | left and centered orientation
App type: emotional
Splash screen
Main Screen (large logo | instructions)
Mouse hover-over triggers a low opacity box selection indication
Grid layout | organized in sections | separators
Result screen (distinct dark section/large play control/bold title) Layouts for tags, lyrics, search
Back button
Suggested links have a grid layout
Motion Design
Navigation
Scroll right | left Scroll up | down
Right click brings up an app bar for alternative tagging
Main page
Song results
Wireframes
Promoted style
• Modern
• Fast
• Responsive
• Color consistent
• Functional
Accessibility
• No scroll up and down via keyboard
on main screen
• Scroll up and down/right-left in
results screen
• Doesn’t select the shazam search button
Guidelines
• Color consistent
• Responsive
• Less control elements
Evaluation & Feedback
• Simple design
• Fast responding
Photo app
Adobe Photoshop express applicationOutlineAn app which enhances the user’s images.
GoalHelp people edit their photographs.
Target groupAll ages
FeelingsProductive, fun
Interface and navigation design
Splash screen: white-light background color | name-logo
Font: light-thin typeface | windows typeface
Navigation: scroll from top-bottom and left-right
Layout: simple| left and centered orientation
App type: emotional
Main screen (main three options)
Splash screen
Controls | back button | undo-re-do buttons
Search image screen
Simple controls click-on selections
Edit screen (distinct grey background | low opacity | controls on app bar)
Back button Editing controls on app bar
Navigation
Scroll right | left
Right click hides all the controls-enlarges the image
Main page
Image Editing Screen
Wireframes
Promoted style
• Modern
• Fast
• Simple
• Functional
Accessibility
• No scroll up and down via keyboard
on main screen
• Doesn’t select editing tools
• Keyboard only selects images in the
search page
Guidelines
• Responsive
• Simple
• Picture focused
Evaluation & Feedback
• Simple design
Travel app
Travel application
OutlineAn app which offers advice, planning and booking features for a perfect trip or outing.
GoalEnables travelers to plan and have a great trip.
Target groupAll ages
FeelingsTrust
Interface and navigation design
Splash screen: green background color | name-logo
Font: regular-medium typeface
Navigation: scroll from top-bottom | left-right
Layout: numerous panels and sections
App type: rational
Main Screen (three main stack panels at the top)
Splash screen
Search hotels screen
Grid layout
Simple controls, click-on selections
Edit screen (distinct grey background | low opacity | controls on app bar)
Drop down menu
Navigation
Scroll up and down Next and previous controls
Main page
Picture Gallery
Wireframes
Promoted style
• Informative
• Responsive
Accessibility
• Scroll up and down via keyboard
• Doesn’t select editing tools
• Lack of separate home button
Guidelines
• Responsive
• Search focused
• Provide feedback
Evaluation & Feedback
• Informative
• Awesome
GoalEducate multi-cultural target group
Design enables:
• Readability
• Structure consistency
• Immersive & responsive experience
• Focus on content
GoalHelp people recognize and engage with music
Design enables:
• Fast/ Responsive outcomes
• Color consistency
• Functionality
• Simplicity
GoalHelps people edit and enhance their photographs.
Design enables:
• Focus on images
• Simple controls
• Responsive experience
• Fast editing
GoalOffers travelers advice on planning and booking
Design enables:
• Informative
• Responsive
• Focus on the search and provide feedback
Conclusions
Education (TED) Readability |rational
Music & Video (Shazam) Simplicity |emotional
Photo (Adobe Photoshop express) Focus on images |emotional
Travel (trip advisor) Focus on search and feedback |rational
General and mutual conclusions
• Consistency
• Simplicity
• Immersive
• Responsive
• Specific focus (by category)