Template research
description
Transcript of Template research
![Page 1: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/1.jpg)
Template researchFor windows 8.1
![Page 2: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/2.jpg)
Education | Music & Video | Photo | Travel
![Page 3: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/3.jpg)
![Page 4: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/4.jpg)
Educational app
![Page 5: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/5.jpg)
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
![Page 6: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/6.jpg)
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
![Page 7: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/7.jpg)
Splash screen
Main Screen | large images and bold titles
![Page 8: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/8.jpg)
Discrete next-previous buttons |Button bar to indicate the page number
Grid layout | organized in sections | separators
![Page 9: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/9.jpg)
Video screen (distinct dark section | large play control | bold title)
Two video layouts
Back | Play button
Suggested links have a grid layout
![Page 10: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/10.jpg)
Navigation
Scroll right | left Scroll up | down
![Page 11: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/11.jpg)
Article links open explorer
![Page 12: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/12.jpg)
Mouse hover-over title, reveals information
![Page 13: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/13.jpg)
Right click introduces a specified search panel
![Page 14: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/14.jpg)
Main page
Video selection
Wireframes
![Page 15: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/15.jpg)
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
![Page 16: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/16.jpg)
Guidelines
• Structure consistent
• Immersive & responsive
• Content focused
Evaluation & Feedback
• Good UI
• Great Content
• Well designed
![Page 17: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/17.jpg)
Music & Video app
![Page 18: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/18.jpg)
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
![Page 19: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/19.jpg)
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
![Page 20: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/20.jpg)
Splash screen
Main Screen (large logo | instructions)
![Page 21: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/21.jpg)
Mouse hover-over triggers a low opacity box selection indication
Grid layout | organized in sections | separators
![Page 22: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/22.jpg)
Result screen (distinct dark section/large play control/bold title) Layouts for tags, lyrics, search
Back button
Suggested links have a grid layout
![Page 23: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/23.jpg)
Motion Design
![Page 24: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/24.jpg)
Navigation
Scroll right | left Scroll up | down
![Page 25: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/25.jpg)
Right click brings up an app bar for alternative tagging
![Page 26: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/26.jpg)
Main page
Song results
Wireframes
![Page 27: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/27.jpg)
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
![Page 28: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/28.jpg)
Guidelines
• Color consistent
• Responsive
• Less control elements
Evaluation & Feedback
• Simple design
• Fast responding
![Page 29: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/29.jpg)
Photo app
![Page 30: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/30.jpg)
Adobe Photoshop express applicationOutlineAn app which enhances the user’s images.
GoalHelp people edit their photographs.
Target groupAll ages
FeelingsProductive, fun
![Page 31: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/31.jpg)
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
![Page 32: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/32.jpg)
Main screen (main three options)
Splash screen
![Page 33: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/33.jpg)
Controls | back button | undo-re-do buttons
Search image screen
Simple controls click-on selections
![Page 34: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/34.jpg)
Edit screen (distinct grey background | low opacity | controls on app bar)
Back button Editing controls on app bar
![Page 35: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/35.jpg)
Navigation
Scroll right | left
![Page 36: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/36.jpg)
Right click hides all the controls-enlarges the image
![Page 37: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/37.jpg)
Main page
Image Editing Screen
Wireframes
![Page 38: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/38.jpg)
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
![Page 39: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/39.jpg)
Guidelines
• Responsive
• Simple
• Picture focused
Evaluation & Feedback
• Simple design
![Page 40: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/40.jpg)
Travel app
![Page 41: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/41.jpg)
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
![Page 42: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/42.jpg)
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
![Page 43: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/43.jpg)
Main Screen (three main stack panels at the top)
Splash screen
![Page 44: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/44.jpg)
Search hotels screen
Grid layout
Simple controls, click-on selections
![Page 45: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/45.jpg)
Edit screen (distinct grey background | low opacity | controls on app bar)
Drop down menu
![Page 46: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/46.jpg)
Navigation
Scroll up and down Next and previous controls
![Page 47: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/47.jpg)
Main page
Picture Gallery
Wireframes
![Page 48: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/48.jpg)
Promoted style
• Informative
• Responsive
Accessibility
• Scroll up and down via keyboard
• Doesn’t select editing tools
• Lack of separate home button
![Page 49: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/49.jpg)
Guidelines
• Responsive
• Search focused
• Provide feedback
Evaluation & Feedback
• Informative
• Awesome
![Page 50: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/50.jpg)
![Page 51: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/51.jpg)
GoalEducate multi-cultural target group
Design enables:
• Readability
• Structure consistency
• Immersive & responsive experience
• Focus on content
![Page 52: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/52.jpg)
GoalHelp people recognize and engage with music
Design enables:
• Fast/ Responsive outcomes
• Color consistency
• Functionality
• Simplicity
![Page 53: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/53.jpg)
GoalHelps people edit and enhance their photographs.
Design enables:
• Focus on images
• Simple controls
• Responsive experience
• Fast editing
![Page 54: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/54.jpg)
GoalOffers travelers advice on planning and booking
Design enables:
• Informative
• Responsive
• Focus on the search and provide feedback
![Page 55: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/55.jpg)
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
![Page 56: Template research](https://reader034.fdocuments.net/reader034/viewer/2022052600/5587e891d8b42a172d8b4641/html5/thumbnails/56.jpg)
General and mutual conclusions
• Consistency
• Simplicity
• Immersive
• Responsive
• Specific focus (by category)