2. Not About Johnson Wang
a product manager
Art
skilled with software
engineering for 10
years, Experienced in
desktop, web, mobile,
Design of user interface is all about flash game
experience. Looking good or fancy is
Knowing your business. progremming and
In order to understand how the user interface design.
not important.
think, designer need to get more idea
of how your business works. Their Currently working on
UI is how we help user to operate new startup of mobile
primary knowledge, culture, age, life
the system, a bridge between system commerce solutions.
style, working environment and what
functionality and humanity. Most
solution you’re providing.
people thinks that the best UI design
is a interface that everyone can
operate it well. For consumer Forget about
product, that’s true, but not for Engineer’s Layout
professional products. Normally, engineer implements their
own layout to test if all function work
For professional products, UI shows a correctly. So the primary target of
clear way to help user learn how to those interface design is for testing.
operate the system for basic and It’s about running through all steps
important functions. And provide and check if some error occurs. And
some advance way for experienced your user doesn’t care about that.
user to operate with efficiency way. They should focus on what they’re
solving with your application.
To design user interface, we need to
do more than Art. 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.
3.
4. Win App
NVR Application for
Home Surveillance
D-Link 2010
Live View
5. Win App
NVR Application for
Home Surveillance
D-Link 2010
Selected channel
Event Notification | Channel Name | Motion Detect Area
Live View Sound ON/OFF | Enlarge Selected Channel
Fullscreen
Layouts
Setup
Playback
Live
Channel List
Timebar
Channel List Swipe timebar to shift Zoom Out | In
Swipe vertically to back to instant
Event Indicator
show more channels. playback Focus Out | In
Click for event detaiil.
PTZ Controller
Quick Tag
Drag dot at center or
snapshot & bookmark
click any poit of ring.
Pager Present Time Indicator
Navigates between each pages Indicates the current time shows
with current layout. on video. Will be always current
actual time while viewing live.
6. Win App
NVR Application for
Home Surveillance
D-Link 2010
Selected channel
Event Notification | Channel Name | Motion Detect Area
Playback Sound ON/OFF | Enlarge Selected Channel
Fullscreen
Layouts
Setup
Playback
Live
Play Button
Single Click to switch between play forward and pause.
Channel List
Drag Left or Right to Play backward or forward.
Timebar
Channel List Event Last | Next
Swipe timebar to shift
Swipe vertically to back to instant
Event Indicator
show more channels. playback Speed Up | Down
Click for event detaiil.
Event Last
Play Forward
Play
Quick Tag Backward Rotate to change
snapshot & bookmark playback speed
Pager Present Time Indicator Event Next Open Smart Search Dialog
Navigates between each pages Indicates the current time shows
with current layout. on video. Will be always current
actual time while viewing live.
7. iPhone App
VuExpro App for
Mobile Surveillance
D-Link 2010
Remote Live View Connections
Quick Add Camera
Enter host address directly and hit “+” button to
connect to device automatically. Hit “+” without
entering any address will bring up a search dialog.
Edit Live Video List
Swipe 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.
8. iPhone App
VuExpro App for
Mobile Surveillance
D-Link 2010
Connection List Connections
Predefined Group Icon
User may select an icon for grouping
HOME
devices or channels.
HOME GARAGE OFFICE
Quick SnapViewer
User can bookmark some connection at front
list, which shows the newest frame while first
log-in. Living Room
22:40 Home
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.
My Seat
22:40 Office
Other Videos...
Notification Manager
Turn to bring up notification manager which
list all events and notifications from devices. 3 remainding issues.
9. iPhone App
VuExpro App for
Mobile Surveillance
D-Link 2010
Live View / Playback Snapshot & Save to Photo Album
Snapshot & Mail
Device Commands
Swipe Between Channels
PTZ Operations
shows when device support ptz
Instant Playback By Dragging the Time Track
Time Track shows when device support track playback
10. iPad App
VuExpro
Connection 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.
11. iPad App
VuExpro
Live 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
