New Opera Browser For Android

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