UI Design Experience

Ux Johnson’sUI Design Experience

2004 - 2012

Johnson Wanga product manager skilled with software engineering for 10 years, Experienced in desktop, web, mobile, flash game progremming and interface design.

Currently working on new startup of mobile commerce solutions.

Not About

ArtDesign of user interface is all about experience. Looking good or fancy is not important.

UI is how we help user to operate the system, a bridge between system functionality and humanity. Most people thinks that the best UI design is a interface that everyone can operate it well. For consumer product, that’s true, but not for professional products.

For professional products, UI shows a clear way to help user learn how to operate the system for basic and important functions. And provide some advance way for experienced user to operate with efficiency way.

To design user interface, we need to do more than Art.

Knowing your business.In order to understand how the user think, designer need to get more idea of how your business works. Their primary knowledge, culture, age, life style, working environment and what solution you’re providing.

Forget about Engineer’s LayoutNormally, engineer implements their own layout to test if all function work correctly. So the primary target of those interface design is for testing. It’s about running through all steps and check if some error occurs. And your user doesn’t care about that. They should focus on what they’re solving with your application.

Application software is a tool for helping user to solve their problem, they should never aware of the software’s existence.

We never design under engineer’s layout, cause we know better about how user needs then they do.

Win App

NVRLive View

Application for Home SurveillanceD-Link 2010

Win App

NVRLive View


Selected channelEvent Notification | Channel Name | Motion Detect AreaSound ON/OFF | Enlarge Selected Channel

Layouts

Channel List

Fullscreen

SetupPlaybackLive

Zoom Out | In

Focus Out | In

PTZ ControllerDrag dot at center or click any poit of ring.

TimebarSwipe timebar to shift back to instant playback

Channel ListSwipe vertically to show more channels. Event Indicator

Click for event detaiil.

Present Time IndicatorIndicates the current time shows on video. Will be always current actual time while viewing live.

PagerNavigates between each pages with current layout.

Quick Tagsnapshot & bookmark

Selected channelEvent Notification | Channel Name | Motion Detect AreaSound ON/OFF | Enlarge Selected Channel

Layouts

Channel List

Fullscreen

SetupPlaybackLive

Event Last | Next

Speed Up | Down

TimebarSwipe timebar to shift back to instant playback

Channel ListSwipe vertically to show more channels. Event Indicator

Click for event detaiil.

Present Time IndicatorIndicates the current time shows on video. Will be always current actual time while viewing live.

PagerNavigates between each pages with current layout.

Quick Tagsnapshot & bookmark

Event Next

Play Backward

Play Forward

Rotate to change playback speed

Open Smart Search Dialog

Play ButtonSingle Click to switch between play forward and pause.Drag Left or Right to Play backward or forward.

Event Last

Win App

NVRPlayback


iPhone App

VuExproRemote Live View

App for Mobile SurveillanceD-Link 2010

Connections

Quick Add CameraEnter host address directly and hit “+” button toconnect to device automatically. Hit “+” withoutentering any address will bring up a search dialog.

Edit Live Video ListSwipe the edit button from left to right to switch to “EDIT MODE” for remove or re-arrange existed connections.

It makes no sense to ask user to determine which device he bought, which resolution, connection speed, port, video encode type he need to connect to camera.

In most case, a simple IP address or URL is acceptable, but maybe a device id printed on device is better.

Just like google search, User can input anything he knows, and the app search any available for them.

If user input nothing, then bring up a search dialog to search all near by devices.

HOME GARAGE OFFICE

Connections

Living Room22:40 Home

My Seat22:40 Office

Other Videos...

HOME

Predefined Group IconUser may select an icon for grouping devices or channels.

iPhone App

VuExproConnection List


3 remainding issues.

Notification ManagerTurn to bring up notification manager which list all events and notifications from devices.

Quick SnapViewerUser can bookmark some connection at front list, which shows the newest frame while first log-in.

This feature help user to quick navigate to some major channel immediately.

When connecting to a nvr or any device which has more than one channel, user may swipe the thumbnail at left to navigate between channels.

PTZ Operationsshows when device support ptz

Instant Playback By Dragging the Time TrackTime Track shows when device support track playback

Device Commands

Snapshot & Mail

Snapshot & Save to Photo Album

Swipe Between Channels

iPhone App

VuExproLive View / Playback


iPad App

VuExproConnection List / Live View

Master View (Left) lists stored profiles. Detail View (Right) shows the live video of selected profile.

Click Add buton to add new profile. While the profile list is empty, the UI shows a simple connection panel instead.

List 9 videos in a page. Swipe to navigate between pages.

iPad App

VuExproLive View / Playback

All Controllers are invisible by default.Touch Move left-Bottom Edge to Control Pan-Tilt.Touch Move Right-Bottom Edige to Control Zoom Click anywhere of View to show dynamic buttons. Including:

Back to NVR Console View

Show Preset Panel

Snapshot & Mail

Show Action Menu \ DIO Controlls and etc.

Snapshot

Swipe with three fingers to next / previous channel.

Pinch for Digital Zoom.

Playback

Drag from left to right at bottom to start playback. Drag to end of time bar to switch back to live view. Double Tap Left to begin Navigate Backward. Double Tap Right to begin Navigate Forward. Shake to switch back to live view. Click Plus to Add Preset

iPhone App

FamilyMartPre Order from Remote

菜單頁面首次進入時將帶至菜單頁面。如有廣告圖，則自動顯示。

時段選擇進入菜單頁面時，將自動根據目前時間跳至相應時段。使用者會看到滑動效果。故使用者可以藉此知道如何切換時段。

商品架商品架中陳列該時段所有商品。商品圖需用去背的PNG格式圖片。

瀏覽商品上下拖動畫面可瀏覽商品。

增加商品（及移除）點商品照片則加點至購物籃，當商品數量大於零時，右上角會出現「減號」按鈕，每按⼀一下從購物籃刪除⼀一個商品。若需全部刪除，可在購物籃中操作。

各時段限制時間限制時間於選取時方顯示，由於App⼀一開始會自動選好時段，因此使用者不至於因為看不到其他時間限制而有困擾。

字體部分目前最小字體與iPhone桌面顯示的字體⼀一樣尺寸，在實機上是看得很清楚的，所以可以不用擔心字體問題。

iPhone App

FamilyMartPre Order from Remote

iPhone App

FamilyMartMenu Page

菜單頁面商品狀態商品狀態包括以下三種

1. 未選取⼀一般剛進入菜單時，商品顯示為未選取狀態。未選取時，商品照片才是使用者關注的重點，因此數量跟刪除鈕都不需要顯示。

2. 已選取選取後代表使用者已經清楚該品項為何，因此重點在于點選與否，及所選數量。另外，此時刪除鈕有作用，故顯示。

3. 暫不供應當時段不允許，或主機回傳之庫存量為零時，則顯示為暫不供應。

購物籃當購物籃內有商品時，右上角購物籃圖式上方會顯示購物籃內商品數量。點選該圖示可檢視購物籃內的商品。

（見次頁說明）

未選取狀態

已選取狀態

不供應狀態

結帳按鈕購物籃有商品時，確認送單鈕會亮起。代表此時可以發送訂單。

iPhone App

FamilyMartShopcart Page

購物籃購物籃內顯示目前已經選取的商品，⼀一方面統計價格，⼀一方面也可以調整所購商品數量。

商品金額顯示金額部分，當數量大於⼀一時，顯示單價 x 數量 = 小計。

而當數量僅為⼀一時，則只顯示單價即可。

商品數量調整數量調整可使用加、減按鈕來調整，或者在名稱上水平滑動手指，則會產生「刪除」扭供使用者直接刪除。

此操作模式是 iPhone 慣用模式，因此對於原來就熟的使用者並非問題。至於不曉得這個功能的使用者，能可透過加減按鈕來調整。

結帳按鈕結帳按鈕設計成隨時都可以按，這樣可以固定結帳按鈕的位置，除了好找以外，對於熟練的使用者而言，更容易單手完成訂餐。

刪除

訂單確認頁訂單確認頁功能主要是要協助使用者確定訂單內容、總金額以及取餐時段。

取餐時段App 會預設自動選取離目前最近的時段，而使用者仍可點選時間進行修改。點選後下方會出現如上圖調整時間的畫面供使用者設定。

此處的取餐時段設定，是使用者期待的時間，但經過伺服器驗證後，最後時間可能會比該時間晚。

正在傳送訂單與訂餐伺服器連線中，請稍候片刻...

送出訂單點選送出訂單後直接送出，此處需要等數秒等候伺服器傳輸及作業時間。

iPhone App

FamilyMartOrder Confirm Page

刪除

正在傳送訂單與訂餐伺服器連線中，請稍候片刻...訂購通知

無論訂購成功或失敗，接會收到通知。成功時顯示訂單資料及QRCode，以利結賬時確認用。失敗時則會跳出顯示伺服器回傳的錯誤訊息。

發生錯誤由於現場材料不足，因此無法接受訂單，敬請見諒。

確認

發生錯誤時錯誤時直接顯示伺服器回傳的錯誤訊息。

iPhone App

FamilyMartOrder Detail Page

滑動切換店家

可更換業者形象圖

指定店名及附帶資訊

搜尋功能找分店或其他

會員卡數量點選進行兌換點數

滑動切換店家

滑動打開工具列

店家 Banner 可更換

名稱在網站上設定

點擊此處打開工具列

點這邊掃條碼

顯示點數資訊

目前商品進度

滑動看還可以換什麼

即滿可點此兌換

·• 預設底部是地圖，直接取得目前座標位置。

·• 地圖的正中間有一個 + 按鈕，點下立即新增新的InterView。如果要新增在其他地點，則托動地

圖，讓 + 上方的箭頭指到指定的地方後再按即可。

·• 地圖上附近若有之前紀錄，以紅框白字顯示，上方數字為更新次數。

·• 地圖上可直接書寫。·• 操作介面往右邊延伸，由右往左滑動可以檢視各種不同排序尋得的InterView。

·• 篩選條件分別為, Recent, Contacts,

Tags。·• 篩選方塊磚內容已選定的圖片或文件顯示，未指定者則以文字顯示。文字部分顯示受訪者，時間跟地點等資訊。

Windows 8 App

InterViewerMain Page

·• 點選畫面上的 + 號快速新增。·• 點一下時 + 往左移動，右邊多出輸入區，並帶出鍵盤。此時點 + 則會在建立一個新的InterView後停留在原處。而按下 Play 鈕則是跳入下頁。

·• 當出現輸入區時，可輸入任意資料當作名字，通常是客戶的電話，因此預設會顯示數字鍵盤。可不輸入直接建立。

Windows 8 App

InterViewerSlides Page

·• 左側白色條為快速工具箱，內容包含:

◦ 加註解可增加文件註解，用來顯示於方塊磚中，或者增加

Sticky Note到文件中。

◦ 設定提醒可設定與文件相關的提醒，提醒可根據時間或地點來判斷顯示時機。

◦ 加Tag可將文件標記為重要文件，或增加搜尋標籤。

◦ 錄音點選後直接錄音。

◦ 拍照拍攝照片並貼到文件上。

◦ 書寫啟用後可直接在文件上書寫。

·• 瀏覽文件的下一頁是用滑動的方式。

·• 左側應該再增加載入文件的按鈕，載入時從文件目前的位置往後面加。

·•

Windows 8 App

InterViewerSlides Page

Windows App

iSap NVRLive View

Windows App

iSap NVRSetup

Windows App

iSap NVRSkin: Dark Knight

Windows App

iSap NVRSkin: Snow

Windows App

iSap NVRSkin: Ferrari

Web App

ACTi NVRLive View

Web App

ACTi NVRTrack View

EZ-WATCHING CO., LTD.