New Opera for Android
PURPOSE
Interaction Design Specification
CREATED DATE
2016/04/11
CREATOR(S)
guoqi@opera.com, pangbo.0102@gmail.com
Revision History Date
Version
Descirption
Author
20160411
0.1
Initiated doc: Information architecture (WIP), reading mode, reading list, rating, tab manager, account
guoqi@opera.com, pangbo.0102@gmail.com
20160425
0.2
Information architecture, updated reading mode, rating card, settings. added screen flows for find in page, share from detail page, other functions from detail page
pangbo.0102@gmail.com
20160428
0.3
Added “download setting” in setting, delete flow, no connection UI screen, search, reading mode, bookmark, download, history, TM, refresh, subscription
guoqi@opera.com, pangbo.0102@gmail.com
20160511
0.4
Updated “search” annotations, added local news design, updated reading mode ( SF&SMD), remove “rating us” card, updated settings annotation
guoqi@opera.com, pangbo.0102@gmail.com
20160512
0.5
Updated Local News and reading mode
guoqi@opera.com
20160514
0.6
Changed new home page, updated annotation on Discovery screen, added new case “add new search engine“, updated “account” screen, friend of friend subscirption, refresh, close Opera, reading list, search annotation, subscription
guoqi@opera.com pangbo.0102@gmail.com
20160530
0.7
updated “account” screen, friends subscirption, close Opera, reading list, search annotation
pangbo.0102@gmail.com
How to Read Symbols Following symbols are to describe the touch interactions directly with the UI:
Single tap
Swipe up Hold and drag (up, down, right, left)
Tap and hold / long press
Hardware Back key
Following symbols are to describe the user interface views and elements:
X
Note or description about interaction
Following symbols are to use in State Machine Diagram (SMD), which explain the behaviour of a single object and specify the sequence of events that an object goes through during its lifetime in response to events:
Start
End
Page state / page changes
Decisoin Point
A Connection Point
Information Architecture
Screen Flow: Search Home_Feeds
Search_Default
Search _ Search Engine Dropdown Menu
Search_Suggestion
Search _ Autocomplete
Notes: 1
Tap to display the keyword/web link in URL bar
2
Tap to search/open the web directly
3
Clear search history
4
Scroll up and down the page or tap hardware Back key to dismiss keyboard
5
After selecting a search engine, displays the same colored search engine icon
5
With History ?
No
Yes
Tap to enter the app
Search Notification - White
Search Notification - Dark
Search_Default_Bookmark & History
Search_Bookmark & History
Swipe up / down
4 1
2
3 Tap hard key Back
Screen Flow: Close App And Put The App in Background Home_Feeds
Home_Feeds_Toast
Notes: 1
Tap again to close
1
Tap hardware back key again to put the app back to the background
Screen Flow: Add To Search Engine Other search website
Add to search engine
Add to search engine- write web title 12:30
Notes: 1
If user didn’t copy anything previously, the “paste” option will not be shown
2
The web title will be added to the search engine list
www.baidu.com
Search
Long press
Website Title Add to search engine... Paste
1
Introduction
Search_Default
Search _ Add to Search Engine Dropdown Menu
Google Yahoo Bing Amazon Dictionary eBay IMDb
2
Web Title
Screen Flow: Global Search Notes: Detail Page - Keywords
Detail Page - Global Search
Detail Page 1
2
copy Manhood
1
Manhood
Detail Page - Global Search widget
Manhood
Detail Page - Web Link
2
copy http://www.opera.com/mmm
Open the link in Detail Page
Global search bar will appear for seconds and dismiss automatically if no actions on the page; When user scrolls the page or taps area outside global search bar, this global search bar will disappear User can set up global search in app settings
Screen Flow: Local News 2 Discovery _ Local News _ 1st time_Dummy Page
Discovery
Discovery _ Local News_with Location Infobar
12:30
X
Local News
Subscribe
Discovery _ Local News _ Refresh Failed 12:30
12:30
7
X
Seattle
Subscribe
Notes:
Discovery
X Local News
6
Subscribe
1
Refresh failed, please try again
NASA Begins Work to Build a Quieter Supersonic Passenger Jet nasa.org
24-03-2016
Seattle 1st time
Yes
Yes
Refresh successfully?
NASA Begins Work to Build a Quieter Supersonic Passenger Jet nasa.org
24-03-2016
2
Once the app locates user’s location/IP, when user is back to Discovery-channels page, Local News is changed to <city’s name>, e.g. New York, Chicago
3
Error toast. It’s clickable, after clicking, it’s refreshing the page or pull down the page to refresh; the toast message is shown less than 5 seconds
4
When user stays at other tab or other apps and put Opera at background for less than 1 hour, then user come back again to Local News, screen as below:
NASA Begins Work to Build a Quieter Supersonic Passenger Jet nasa.org
24-03-2016
Allow Opera to access this device’s location?
No
YES
If user taps Yes, this Infobar will never be shown again; If user taps the close button, the bar will be dismissed and will display 1 week later. When user scrolls the page, the bar disappears and will appear again when the page stops scrolling
1
No
Discovery _ Local News
Discovery _ Local News_Refreshing
12:30
12:30
X Seattle
Discovery _ Local News_with Location Infobar
X
Subscribe
Subscribe
Chicago
Discovery _ Local News _ Refresh Failed
12:30
X Chicago
Subscribe
12:30
X Seattle
Subscribe Refresh failed, please try again
NASA Begins Work to Build a Quieter Supersonic Passenger Jet nasa.org
3
NASA Begins Work to Build a Quieter Supersonic Passenger Jet
NASA Begins Work to Build a Quieter Supersonic Passenger Jet
NASA Begins Work to Build a Quieter Supersonic Passenger Jet
nasa.org
nasa.org
nasa.org
24-03-2016
24-03-2016
Discovery _ Local News_with Toast 12:30
24-03-2016
24-03-2016
X Seattle
Subscribe
10 updates
Yes
Location changed?
NASA Begins Work to Build a Quieter Supersonic Passenger Jet nasa.org
Yes
Refresh successfully?
NASA Begins Work to Build a Quieter Supersonic Passenger Jet
Yes
Allowed location before?
No
NASA Begins Work to Build a Quieter Supersonic Passenger Jet
NASA Begins Work to Build a Quieter Supersonic Passenger Jet
NASA Begins Work to Build a Quieter Supersonic Passenger Jet
nasa.org
nasa.org
nasa.org
24-03-2016
24-03-2016
nasa.org
24-03-2016
24-03-2016
24-03-2016 Refresh successfully?
NASA Begins Work to Build a Quieter Supersonic Passenger Jet
Yes
NASA Begins Work to Build a Quieter Supersonic nasa.org Passenger Jet
Allowed location before?
NASA Begins Work to Build a Quieter Supersonic Passenger Jet
NASA Begins Work to Build a Quieter Supersonic Passenger Jet
NASA Begins Work to Build a Quieter Supersonic Passenger Jet
nasa.org
nasa.org
nasa.org
24-03-2016
24-03-2016
Allow Opera to access this device’s location?
nasa.org
24-03-2016
YES
Yes
NASA Begins Work to Build a Quieter Supersonic Passenger Jet
No
No
24-03-2016
nasa.org
No
24-03-2016
No
Discovery _ Local News
Discovery _ Local News_with Location Infobar 12:30
X Seattle
Subscribe
12:30
X Seattle
Subscribe
NASA Begins Work to Build a Quieter Supersonic Passenger Jet
NASA Begins Work to Build a Quieter Supersonic Passenger Jet
nasa.org
nasa.org
24-03-2016
24-03-2016
NASA Begins Work to Build a Quieter Supersonic Passenger Jet
NASA Begins Work to Build a Quieter Supersonic Passenger Jet
nasa.org
nasa.org
24-03-2016
24-03-2016
NASA Begins Work to Build a Quieter Supersonic Passenger Jet
NASA Begins Work to Build a Quieter Supersonic Passenger Jet
nasa.org
nasa.org
24-03-2016
5
24-03-2016
Allow Opera to access this device’s location?
YES
When user stays at other tab or other apps and put Opera at background for more than 1 hour, then user come back again to Local News, page will be automatically refreshing
6
After the channel is subscribed, the button is changed to “Unsubscribe”
7
When the page is refreshing, “Subscribe” button is disabled
Screen Flow: Reading Mode Notes: The “Go To Reading Mode ” button will disappear after the transcoded content loaded completely
1 Home - Feeds Reading mode Yes In white list?
If user taps Yes, next time when user taps an article, it is transcoded by default and the bar will never be displayed. In settings, the switch is on simultaneously; If user taps the NO THANKS button, the bar will be dismissed and will display 3 days later. When user scrolls the page, the bar disappear and will appear again when the page stops scrolling. User can also set “reading mode” switch on/off in Settings > Advanced settings
2
No
Domain is in blacklist?
have set reading mode as defualt mode?
1st time use reading mode?
No
No
No Yes
Yes
Yes
2 Reading mode - web mode switcher
“Add to reading list” & “Share” icon buttons are floating on the bottom of the screen on top of UI, when user scrolls the screen, icons disappear, they appear again when the page stops. Icons are in both “web mode” & “reading mode”
3
May.25, 2016
Reading mode - reading list toast
“Function menu” as below, screenshot is wireframe:
4
Pre-web mode
www.baidu.com
Load failed please retry again.
Retry
Pre-web mode
HTML5 page below
5
Web mode
Web mode
Web mode - indicator disappears
1 3 seconds later
Instant View Go to reading mode
4
7
7
3
3 seconds later, indicator in URL bar disappears
The tip will be shown for 3 seconds for the first 3 times when continously entering the page.
6
Loading completed
6
If the link is from outside website which user directly inputs from URL bar, then use the normal detail screen
Yes
SMD: Reading Mode
Open another link
Start
Domain is in blacklist?
Yes
Open Google H5 page
Select an article from Feeds
No
Pre-web mode
Select “Reading mode”?
No, after loading completed
Stay in “Web browser mode”
Yes
Have set reading mode as default?
Yes
No
1st time transcoding?
No
In “Reading mode” detail page, Infobar asks “set reading mode as default”
set reading mode as default?
Yes Yes
Stay in “Reading mode”
In “Reading mode”, Infobar never appears; In app Settings: Reading mode is ON
End
No,Close the Snackbar
In “Reading mode”, Infobar will be dismissed and it will be displayed after 3 days
Screen Flow: Reading List Home _ Feeds
Profile _ Reading List_ after login
Profile _ Reading List_before login
Profile _ Reading List Edit=1
Notes:
Profile _ PReading List Context Menu Select All
1
Number will be changed as user selecting the items
2
The date is â&#x20AC;&#x153;article addedâ&#x20AC;&#x153; date, rules below: - Just now; - <number> mins ago: when the article is pushed less than 1 hour ago, e.g. 10 mins ago - 1 hour ago: when the article is pushed less than 2 hours ago - <number> hours - Yesterday - <Date>, <Year> e.g. May.30, 2016
1
No
2 hours ago
www. medium.com
2 hours ago
www. medium.com
2 hours ago
www. medium.com
2 hours ago
www. medium.com
5 hours ago
www. medium.com
5 hours ago
www. medium.com
2
Long press 5 hours ago
login?
www. medium.com
5 hours ago
www. medium.com
May 27, 2016
www. medium.com
May 27, 2016
www. medium.com
May 27, 2016
www. medium.com
May 27, 2016
www. medium.com
May 29, 2016
www. baidu.com
May 29, 2016
www. baidu.com
May 29, 2016
www. baidu.com
May 29, 2016
www. baidu.com
yes
Profile_ Reading List Edit=All
Profile_ Reading List Unselect All
2 hours ago
www. medium.com
2 hours ago
www. medium.com
5 hours ago
www. medium.com
5 hours ago
www. medium.com
May 27, 2016
www. medium.com
May 27, 2016
www. medium.com
May 29, 2016
www. baidu.com
May 29, 2016
www. baidu.com
SMD: Reading List
Start
Long press
Edit mode: one item is selected
Select All from Function menu
All items are selected
Unselect All from Function menu
Profile - Reading list
Delete
No
Delete
Delete?
Delete all?
Yes
Yes
End
No
All items are unselected, cannot delete anything
Screen Flow: Bookmark _ Add New Bookmark & Folder B Home _ Feeds
Bookmark
Bookmark Empty?
Bookmark _ Context Menu
Add New Folder Process
Bookmark _ Add New Folder
No
Bookmark _ empty
Yes
Bookmark _ Create New Folder
Bookmark _ Edit Folder _ Selection
Bookmark _ Edit Folder_ Subfolder Selection
SMD: Bookmark _ Add New Folder & Bookmark
B
Add New Folder Process
Yes
Start
Tap the Context Menu
Create New Folder
Fill in Folder’s Name
Create A New Folder?
No
Select Folder
Profile - Bookmark
No
Under Existing Folder?
Select a Folder
Create New Bookmark
Fill in Folder’s Name
Fillin URL
Yes & create
End
Screen Flow: Bookmark _ Move Home _ Feeds
Bookmark
Bookmark _ Move_ Hold
Notes:
Bookmark _ Drag to move
1
After taping the button, page will go to the new folder page and the added bookmark is inside the folder
Long hold drag
Long press
Bookmark _ Edit = 2
Bookmarks Move_Select Folder
Bookmarks Move_Subfolder selection
Bookmarks Move_Select Folder_Scroll Up
Bookmarks Move_New Folder
Long press to enter edit mode, select more than one item
1
Screen Flow: Bookmark _ Edit Folder Home _ Feeds
Notes:
Bookmark
1
B
Long press
Bookmark _ Folder Edit = 1
Bookmark _ Edit Folder
1
Bookmark _ Edit Folder _ Active
Bookmark _ Edit Folder _ Selection
Add New Folder Process
Bookmark _ Edit Folder Selection _ Subfolder
Function menu includes: - Open in new tab - Open in private tab - Select all
Screen Flow: Bookmark _ Edit Bookmark No, open tabs directly w/o pop-up
Bookmark
Home _ Feeds
Bookmark _ Bookmark Edit = 1
Bookmark _ Bookmar Edit
1 _ Context Menu
Bookmark _ Bookmar Edit
Notes:
ALL _ Context Menu
1 ≥ 9 Tabs?
Yes
No
Open all tabs Long press
Login ?
yes
“Sign In” Process
Bookmarks-Context Menu(not sign in)
Bookmark _ Edit Bookmark
Delete
Bookmark _ Folder Edit = all
1
Bookmark _ Edit = 2
Bookmark _ Folder Edit = 0
User can multi-select and delete multiple items. After user taps Delete icon, it displays undo button and the number of Cleared items. if user taps undo, all the deleted items will be displayed back in the list view; if user didn’t tap on Undo, this Snackbar will stay for seconds and disappear. Snackbar behavior, please refer to: https://www.google.com/design/spec/ components/snackbars-toasts.html#
SMD: Bookmark _ Edit Bookmark
Open in new tab
Start
Long press
Long Press One Bookmark
Tap the context menu
Open in private tab Open in new tab
Profile - Bookmark
No
Select all
Open in private tab Yes
Yes
Delete Bookmark?
End
Yes
No
No
Edit Bookmark
Edit Bookmarkâ&#x20AC;&#x2122;s Name
Edit URL
Select Folder
B
Add New Folder Process
Screen Flow: Download Home _ Feeds
Profile _ Download _ Empty
Profile _ Download
Download Manager-Collapse
Profile _ Download Manager
Notes:
Profile_ Download _ Context Menu
3
remove “download setting” for the 1st release
1
No
1
2
3
History empty?
Yes
Long press
Profile_ Download Edit = 1
Profile_ Download Edit =1 _ Context Menu
Profile_ Download Setting
2
Profile_ Download Edit = 1 _ Context Menu
remove “download setting” for the 1st release
Profile_ Download _ Select = 0
Downloaded part should be expanded by default User can also set up “Download setting” in App Settings Do not show function menu when the page is empty
Screen Flow: Download From Web Trigger point- Download from web
Download Manager _ WIFI
Download Manager _ Download Confirm
Download Manager _ Download Transition
Download Manager _ Download Started Toast Massege
Notes:
Yes
Notification
Notification
You are not in WIFI environment. Download ?
No
1
Are you sure to download?
may cost you much data. Are you sure to continue?
Cancel
Download
Cancel
Motion design TBD
Download
1
Tap again to quit
Download _ Check Notification
After tapping Download button, thereâ&#x20AC;&#x2122;s motion design to indicate user that something is downloading in Profile page
Screen Flow: History Home _ Feeds
Profile _ History _ empty
Profile _ History
Profile_ History Edit=1
Profile_ History Edit=1 _ Context Menu
Notes: 1
2 Long press
No
3
History empty?
yes
Profile _ History Context Menu Clear All
Profile_ History Edit=All
Profile_ History Edit =All _ Context Menu
2
Theis is no context menu button when History page is empty Need to design a Generic Delete Massege "Copy link address" should be disabled when multiple history records are selected
Screen Flow: Toolbar - Tab Manager Notes:
Empty?
Home _ Feeds
Tab Manager _ Normal
Tab Manager _ Normal _ More
Tab Manager _ Private _ More
YES
Tab Manager _ Private
Tab Manager _ Opera Sync Refresh
Private_New Tab Page
NO
1
4 2
3
4
1
3
Tab Manager _ Opera Sync
Tab Manager _ Opera Account Sign in
No
Already login?
Yes
Multiple Devices?
Tab Manager _ Opera Sync Refreshed
Tab Manager _ Opera Sync Failed
No
Hold and drag down to refresh
NO
Successful?
Yes
After login Opera Account
Stay in “Synced Tabs” page and displays “Just synced”
Tab Manager _ Opera Sync Multiple Devices 1
Tab Manager _ Opera Sync Multiple Devices 2
Yes
Hold and drag down to refresh swipe
After close all Tabs, automatically open Home page (Dashboard) Home (Dashboard) will always be fixed as the first Tab, it cannot be removed When creating a new tab, it lands on Search page Swipe up on a Tab to close or tap the Close icon button to close one Tab
SMD: Tab Manager
Hold and drag down to refresh
Multiple device tab lists
Refresh failed toast message No
Yes
Multiple devices ?
No, hold and drag down to refresh
Refresh tab list
Refresh successful ?
Yes
Start
Tab gallery (Normal & Private)
Already login ?
Sync tabs
Yes
Stay in Tab list
open one tab
No
Sign in/sign up Opera account
Toolbar
Close all tabs
Go back to Home (Dashboard)
Click more button
Reopen closed tab
open last closed tab
End open one tab
Add a tab
Search page
Swipe up
open a tab
Close a tab by gesture
Screen Flow: Setting Content Detial
Function Menu
Setting
Setting_Data
Settings_Clear Data
Settings_Clear Data_Selected
Notes: 1
Tap: Introduction/Frequently asked questions/ report a problem to go to corresponding webpage
1 2
Download setting
Settings_Data Savings_Disabled
Settings_Data Savings_Enabled_Medium_By Default
Settings_ Cookies
Settings_User Agent
Settings_Data Savings_Enabled_Low
Tap to go to Opera bug wizard
Settings_Data Savings_Enabled_Medium
Settings_Data Savings_Enabled_High
1
2
remove â&#x20AC;&#x153;download settingâ&#x20AC;? for the 1st release
Settings_Data Savings_Reset
Screen Flow: Feedback Detail page
Home _ Rating
Setting
Notes: 1
2
Feedback page’s entry point is from: - Detail page - Rating us card - Report a problem from app setting When user selects an problem option or write any text in the text box, the “send” button is activated; If the text is exceed to the text limitation, user cannot be able to input more texts Feedback_text limits 12:30
Feedback
It crashes It’s slow I miss some features I don’t like the look and feel Sometimes sites don’t work Other
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore 5000/5000
Send
3
Feedback_default
Feedback_text normal 12:30
1
12:30
Feedback
Feedback
It crashes
It crashes
It’s slow
It’s slow
I miss some features
I miss some features
I don’t like the look and feel
I don’t like the look and feel
Sometimes sites don’t work
Sometimes sites don’t work
Other
Other
Please inform the problem you’ve encountered. We’ll handle it sa soon as possible. optional
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
0/5000
120/5000
Send
Send
2
Display a toast messege “Thank you for your feedback!” after user submit the feedback
SMD: Reading Mode
Start
Article transcodable?
Yes
Article has copyright?
No
Article Summary
Select an article from Feeds
Yes
“Read full article”
No
Open non-transcodable page
1st time transcoding?
Yes, go to “reading mode”
Stay in “Reading mode”
End
No No
Start
Article transcodable?
In “Reading mode” with Snackbar asking “set reading mode as default”
Yes
No, select “Reading mode”
set reading mode as default?
Select an article from any website
Pre-reading mode
Loading completed?
Yes, few seconds later, indicator in URL bar disappears
Stay in “Web browser mode”
Ignore Snackbar for a few seconds
In “Reading mode”, Snackbar dismiss automatically
Yes
In “Reading mode”, Snackbar never appears; Settings: Reading mode is ON