New Opera for Android
PURPOSE
Interaction Design Specification
CREATED DATE
2016/04/11
CREATOR(S)
guoqi@opera.com, wenl@oupeng.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, wenl@oupeng.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
guoqi@opera.com, wenl@oupeng.com 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: Reading Mode Notes: Summary Page
Home - Feeds
Web mode
Web mode - reading mode indicator
1 6
2
Article transcodable?
Yes
Article has copyright?
few seconds later, indicator in URL bar disappears
No
3
4 Yes No
Loading completed
Detail Page w/o switch 1st time transcoding?
Yes
This page will disappear after the transcoded content loaded completely User can also set “reading mode” switch on/off in Settings > Advanced settings; this UI component is called “Snackbar”, which will appear for seconds and dismiss automatically If user taps Yes, next time when user taps an article, it is transcoded by default and the Snackbar will never be displayed. In settings, the switch is on simultaneously “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”
5
Copies (e.g. toast message) will be refined.
6
“Function menu” as below, screenshot is wireframe:
No 7 Reading mode
Reading mode - web mode switcher
Reading mode - reading list toast
7
Pre-reading mode
If the article is transcodable, go to “Web mode” with “Reading mode” icon on the top bar; if the article is not transcodable, stay in current page without “Reading mode” icon on the top bar
1
8 Not sure
Select a link from a website
transcodable?
3
H5 page below, when user taps “Report”, it goes to bugs.opera.com
Yes
8
4
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
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
2
1
2
No
Long press
login?
yes
Profile_ Reading List Edit=All
1
Profile_ Reading List Unselect All
Need to design a Generic Delete Massege Number will be changed as user selecting the items
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 _ Context Menu
Add New Folder Process
Bookmark _ Add New Folder
Bookmark _ Edit Folder _ Selection
Bookmark _ Edit Folder_ Subfolder Selection
Notes: 1
2
Bookmark Empty?
No
Bookmark _ empty
Yes
Bookmark _ Create New Folder
Need to design a Generic Delete Massege Number will be changed as user selecting the items
SMD: Bookmark _ Add New Folder & Bookmark
B
Add New Folder Process
Yes
Add new folder
Start
Tap the Context Menu
Tap Add New Folder
Fillin Folder’s Name
Create A New Folder?
No
Select Folder
Profile - Bookmark
Yes
Under Existed Folder?
Select a Folder
Add new Bookmark
Tap Add New Bookmark
Fillin Folder’s Name
Fillin URL
No
End
Screen Flow: Bookmark _ Move Home _ Feeds
Bookmark
Long press
Bookmark _ Move_ Hold
Bookmark _ Drag to move
Bookmark _ Move _ Scroll Up
Bookmark _ Move _ Select Folder
Long hold drag
scroll
Bookmark _ Move _ New Folder
Screen Flow: Bookmark _ Edit Folder Home _ Feeds
Bookmark
Notes:
Bookmark _ Folder Edit = 1 _ Delete
1
2
Missed a Page: Delete Folder Select = 1
Missed a Page: Delete Folder Select = 1
The background image should be one selected folder not bookmark.
The background image should be one selected folder not bookmark.
B
Long press
Bookmark _ Folder Edit = 1
Missed a Page: Folder Select = 1
Missed a Page: Folder Select = 1
One folder should be selected.
One folder should be selected.
Bookmark _ Edit Folder
Missed a Page: Bookmark _ Folder Edit = 1
Missed a Page: Bookmark _ Folder Edit = 1
Bookmark _ Edit Folder _ Active
Bookmark _ Edit Folder _ Selection
Add New Folder Process
Bookmark _ Edit Folder Selection _ Subfolder
Need to design a Generic Delete Massege Number will be changed as user selecting the items
Screen Flow: Bookmark _ Edit Bookmark Home _ Feeds
Bookmark
Bookmark _ Bookmark Edit = 1
Bookmark _ Bookmar Edit
1 _ Context Menu
Bookmark _ Bookmar Edit
Notes:
ALL _ Context Menu
No
1 ?
Yes
Need to design a Generic Delete Massege
No
Long press
Open all tabs Long press
Bookmark _ Edit Bookmark
Missed a Page:
Missed a Page:
Generic Delete Message
Generic Delete Message
Bookmark _ Edit = 2
Missed a Page:
Missed a Page:
Bookmark _ Edit = 2 _ Context Menu Context Menu should display: - Open in new tab - Open in private tab - Select all
Bookmark _ Edit = 2 _ Context Menu Context Menu should display: - Open in new tab - Open in private tab - Select all
Bookmark _ Folder Edit = all
Bookmark _ Folder Edit = 0
Bookmarks Move_Select Folder
Bookmarks Move_Subfolder selection
Bookmarks Move_Select Folder_Scroll Up
scroll
Bookmarks Move_New Folder
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’s Name
Edit URL
Select Folder
B
Add New Folder Process
Screen Flow: Download ( by PB) Home _ Feeds
Profile _ Download _ Empty
Profile _ Download
Download Manager-Collapse
Profile _ Download Manager
Profile_ Download _ Context Menu
Profile_ Download Edit =1 _ Context Menu
Profile_ Download Setting
1
No
History empty?
Yes
Long press
Profile_ Download Edit = 1
Download Manager-Delete
Profile_ Download Edit = 1 _ Context Menu
Missed a Page:
Missed a Page:
Profile _ Download Edit = All
Profile _ Download Edit = All
Profile_ Download _ Select = 0
Screen Flow: Download From Web ( by PB) Download Manager _ Folder Selection
Trigger point- Download from web
Download _ Check Notification
Download Manager _ Folder Selection
Download Manager _ New Folder
Download Manager _ Folder Rename
Screen Flow: History ( by PB) Home _ Feeds
Profile _ History _ empty
Profile _ History
Profile_ History Edit=1
2
Profile_ History Edit=1 _ Context Menu
Notes: 1
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
2
3
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: Rating Notes: Home _ Rating
Feedback_Opera Bug
Gooel Play 4
1
3
1
2
2
3
4
Meet either condition below to show this rating card: - user never clicks "rate for 5 stars"; - it’s more than 14 days after last popup rating window appeared; - after user checked out articles for 15 times and is back to home (Dashboard); - user finished one search and got into a webpage, and then back to home page (Dashboard); - user connected social account, and checked out the contents for 5 times, and back to Home (Dashboard) - Once meeting either condition above, after user comes back Home (Dashboard) from Details screen, Rating card is inserted after the last viewed News card - Once meeting either condition above, When open the app, Rating card is on the top of the Feeds
Tap on card to go to Google Play, app’s intro page A user guide appears for 5 seconds and then disappears. User guide is for showing where and how to give a rate Taps on “Not satisfy”, it goes to: bug.opera.com
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
Screen Flow: Home (Dashboard) & Tab Manager Logic Notes: Home _ Feeds
Profile
Browser Mode - Detail Page
Navigation Stack 1
2
12:30
12:30
2
3
4
3
Baidu Profile - Reading List
1
Tab Manager
Tab Manager
Normal
Normal
Private
Search Page
Browser Mode - Detail Page
Private 12:30
12:30
Detail Page
Home (Dashboard)
Profile - Reading List
Home (Dashboard)
From Home (Dashboard), tap Profile, a new Tab for Profile is created
Browser Mode - Detail Page
3
4 4
“Profile” page will not be shown in Profile History list Long hold and press on Back button to display navigation stack.“Profile” page will be shown there Tap to open previous Tab page
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: Account - Sign In Accounts & Error Messages Home - Feeds
Sign In _ default
Social Account _ feedback success
Sign In (twitter or Opera account)
Social Account _ Feedback Fail
5
Notes:
3
1
After tapping “Enter user name” text filed, the keyboard swipes up
Open Web Twitter to authorize No
No
2 Successful ?
Twitter installed?
Yes
Yes Open Twitter App to authorize
3 2
4
login
After tapping “Check my feed”, the page goes to home feed If user taps somewhere outside the pop-up window or tap Back key on device, then the window disappears (TBD) If the Server is ready, it provides user 3 social accounts to login, UI as below:
NO
“Sign In” Process Sign In_Shows Keyboard
Sign In_PW invisible
Sign In_PW visible
Profile_After Login
1
YES
5
B
A
Connected to account & sign out
“Sign Up” Process
Error Message for Sign In Sign In_New username
Sign In_New mail
Sign In_Incorrect pw
Sign In_Incorrect pw
UI will be updated..
Screen Flow: Account - Sign Up Opera Account & Error Messages “Sign Up” Process Sign Up_Default
Sign Up_PW invisible
Sign Up_PW visible
Profile_After Login
Notes: 1
A “Sign Up” Process
Error Message for Sign Up Sign In_New username 1
Sign In_New mail 1
Sign In_Incorrect pw
If user taps “Sign in now”, goes to the sign in process
Screen Flow: Account - Sign Out Accounts & Error Messages “Sign in” process Social Accounts_Login with Opera account
Sign In _ default
Twitter only?
Connect_sign out 3rd party account
Social Account _ successful
Sign In _ default
Yes
1
B Connected to account & sign out No
No
Open Web Twitter to authorize No Successful ?
Twitter installed?
Yes
Opera only?
Notes:
Open Twitter App to authorize
Social Account _ Logined With Opera Account
Connect_Sign Out Opera Account
Social Account _ Feedback Success 01
Social Accounts_Login with Opera & Twitter Account
Connect_Sign Out Twitter Account
Connect_Sign Out Opera Account
Yes
No
Yes
Social Account _ Feedback Fail
(TBD) If the Server is ready, account page will be:
Screen Flow: Refresh Notes: Pull down to refresh
Home _ Rating
Feedback_Text Normal 1
2
Yes
1
2
Refresh Successful ?
No
Hold and drag down 3
No connection 1
4
By default, it shows the first tab (Homefeeds) and Discovery tab, user can add up to 10 tabs. Mandatory conditions: 1. when 7 updatable in news or news channels page or news list page Trigger Scenes 1. If user didn’t preform interaction after one minute of last refresh, show notification to user: e.g “12 news updated” 2. When user back from news details page and no interaction in 1 minute, show notification: e.g “12 news updated” 3. When user stay at other tab( not details page) or app run at background for less than 1 hour, and back again to list, then show notification, e.g “12 news updated” 4. When user stay at other tab( not details page) or app run at background for more than 1 hour, and back again to list, refresh the list directly. 5. When user exit app, and restart, refresh the start page directly. (no need to show notification). 6. User open historical news, show notification as well. No interaction means: Only swipe down or load more. No action like “click into details page”, “refresh”, or “switch to another list” The minimum items for notification: at least 7 items for start page, and 10 for channel page. Maximum items is 20. The actual number is increased from time to time. Notification for no network connection 1. show "no connection" and refresh icon when there is no network connection. Click the refresh icon to refresh the content. 2. Need a separate "No network connection" page for start page. (No design yet).
Screen Flow: Add to bookmarks/reading list/3rd party app, find in page Home
Share to
Add to Bookmarks
Add to Bookmarks-Select Folder
Add tookmarks-in Folder
Notes:
Add to Bookmarks-New Folder
1 1
Display share button on both transcoded detail page or untranscoded detail pages - By default, each row displays 3 apps, apps sequence is: Twitter, facebook, LinkedIn messager, whatsapp, tumblr and more. Tap on more to select from a list of apps; - Display uninstalled app icons after installed apps; - If tap on uninstalled apps icon, user can go to the website to share
2
1
There will be 9 icons on the pop-up window. VD will update screen 2
3 Shared Toast
Function Menu-Turbo Off
Function Menu-Turbo On
Add to Bookmark
3
Find in page
Find in page-result
NO
Result ?
YES
Find in page-no result
If app is already installed, then open the app to share inside it. If it’s not installed, then go to the app’s website to share After tapping OK, displays a toast “Saved page to bookmark”
Screen Flow: Details page Content Detials
Tabe Page-http&private tab
Context Menu
Notes:
Tabe Page
1 1 3 2
Display browsing records Hold and drag down the screen to display Add & Refresh & Close icons on the top of the screen
3
Interaction design for each function in this list is the same as existing OFA
long press
4
Motion design to show how to switch different functions. please refer to: https://drive.google.com/a/opera.com/ folderview?id=0B4M-CgMio_aMEVPY0NlTlQ3SEU&usp=sharing_ei d&ts=571dced1
long press Backward Menu
Refresh
Add
Close
4
1
Hold and drag down
2
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
Settings_Data Savings_Disabled
Settings_Data Savings_Enabled_Medium_By Default
Settings_ Cookies
Settings_User Agent
Settings_Data Savings_Enabled_Low
Settings_Data Savings_Enabled_Medium
Settings_Data Savings_Enabled_High
1
Settings_Data Savings_Reset
Reading List State Machine Diagram LEGEND
Start
End
Screen Page
Screen Outside OFA
Model Overlay
Decisoin Point
Toast Message
Notes
Section
Delta
A Connection Point
A
Sign in / up Process
NO
Twitter login
Open Web Twitter to authorize
NO
YES Successful ?
Twitter installed?
YES
Open Twitter App to authorize NO
Sign in/up
Already have Opera account
Fillin the user/ email address
Fillin the password
Information correct ?
yes
Shift to sign in? yes
no
Do not have Opera account
Fillin the user/ email address
Fillin the user/ email address
Existed username or email ?
yes
Correct format?
YES
Login successful
Bookmark State Machine Diagram
yes
B
Create a new subfolder ?
Select existed folder
yes
A
Add new folder
Fillin the folder’s name
no
Under the existed folder ?
no
no
Context Menu Add new Bookmark
Sign in/up
End
Folder edit =1
Long hold & press
C
Fillin the bookmar name
Edit
Fillin the URL
yes
Under the existed folder ?
A
Context Menu
Select other folder/folders
yes
Delete
no
Open in new tab Folder multiple edit
Context Menu Open in private tab
Move
B
Select All
D
yes
Delete
no
Open in new tab Folder edit= all
Context Menu Open in private tab
Move
B
Open in new tab Bookmark edit= 1
Context Menu Open in private tab
Edit
C
Select All
D
yes
Delete
no
Open in new tab Bookmark multiple edit
Context Menu Open in private tab
Move
B
Select All
yes
Delete
no
D Bookmark & Folder edit = all
Open in new tab Context Menu Open in private tab
Move
Delete
no
A
yes
D