Moblin - A small UX project - maemo.org

Kangal | # 1 | 2011-05-28, 05:54 | Report

Back in the day of Moblin, and when N900 was the hands-down best device I made a UX for a Linux OS (Moblin/Maemo/Ubuntu). This was during the iPad rumour/announcement and just before the Nexus One, and at its time I think it was quite a sophisticated UX.

Would you guys be interested in seeing it? Ofcourse you would :P

I had spent considerable time making it a UX for internet tablets (>5") which is finger-friendly but also easily adaptable for mouse input.

I was involved with a small internet group and we were actually making this on KDE and was going to release it to the repositories, but the group sort of separated (marrige, university, not replying etc etc). Planned on fusing "clean looks", "quick uses" to UNR. So anyone interested should pick this project up, its open.

I'm in the process of uploading them now to imgshak, so just be a little patient.

Last edited by Kangal; 2011-05-28 at 07:31.

The Following 7 Users Say Thank You to Kangal For This Useful Post:
AlMehdi, drangina, elie-7, Joseph9560, The Winter, theonelaw, Transcend

Daneel | # 2 | 2011-05-28, 06:17 | Report

I doubt i can contribute but I would love to see it so AMIGAT, WHEREZ R ZE PICS OF UX, NAU!

Kangal | # 3 | 2011-05-28, 06:26 | Report

All icons are made by original composer excluding:

MSN: http://en.onsoftware.com/wp-content/...ger-icon-1.png
Skype: http://www.touchmyapps.com/wp-conten...skype-icon.png
Twitter: http://hospitalmusic.files.wordpress...wittericon.png
Facebook: http://lifepurposeapp.com/iphone/icons/facebook.png
Tick: http://static-p3.fotolia.com/jpg/00/...x7Zw62Oviw.jpg
Airplane Mode: http://digital-lifestyles.info/copy_...ht-mode-lg.jpg

And others include modified from the Windows 7 icon set, etc.
---------------------------------
It is a UX that is scalable and dependant on the screen size and resolution:

Minimum = UMPC -- 5.0" -- 800x480 resolution (187PPI)
Optimal = Tablet -- 10.0" -- 1280x720 resolution (147PPI)
High = Notebook/TV - 15.6" -- 1920 x 1080 res (<141PPI)

Lanscape:
Minimum = 109mm x 12.4mm (Superbar size), 3 Items shown on Superbar
Optimal = 221mm x 24mm (Superbar size), 4 Items shown on Superbar
High Q. = 345mm x 36.8mm (Superbar size), 7 Items shown on Superbar

Portrait mode: was in consideration/development
-----------------------------------------

Kangal | # 4 | 2011-05-28, 06:26 | Report

The outlay of the pages for "My Device" (ie System Properties), "Open Tasks" (List of Running Applications), and "Settings" which is divided into three major groups, followed by sub-groups.

***My Device***

A list of the My Device Settings (device info, memory, device rating, Operating System, Back UP) with icons on left
(or optional restore to fixed halfscreen in landscape)

Device info:

Owner: Kangal
Model: Nokia X900
Processor: ____ARM Sparrow ZXE2010
_____________2.0GHz Dual-Core Cortex A9
RAM: 1GB DDR3
OS: Mobling Pro
HDD: 32GB

System Memory:
File System: NTFS
Total: 30,500 MB (32GB)
Free: 16,500 MB (53%)
Used: 14,000
__________System: 4,300 MB (14%)
__________Documents: 3,000 MB (10%)
__________Pictures: 800 MB (3%)
__________Music: 4,000 MB (14%)
__________Videos: 2,500 MB (8%)

Quota Settings:
____( ) Set Quota Limits for specific users:
__________( ) Kangal
__________( ) Guest

____( ) Set Quota Limits for specific folders:
__________( ) Documents = MB
__________( ) Pictures = MB
__________( ) Music = MB
__________( ) Videos = MB

____( ) Alert User:
__________( ) Before exceeding limit (before pasting commences; this media exceeds the user limit, notification pops up)
__________( ) After limit is exceeded
__________( ) Do not alert

Device Rating:

Device Rating: 3.1 Determined by lowest subscore

Processor: Calculations per second 4.8
Memory (RAM): Memory operations per second 3.1
Graphics: 3D gaming graphics performance 3.2
Data rate (HDD): Disk data transfer rate 3.6
Battery life: Hours usable from full charge under normal use 6.2

Last tested: 13/01/2010

What do these numbers mean?
Re-run assessment
View & Print detailed performance and system information

Operating System:

OS: Mobling 1.3 Pro
Version: 1.3.07
System: 32-bit
Time Installed: 23:13 10/01/10
Product ID: RTY34FU79JS00X

Update OS -> You have the latest build!
Upgrade to PRO -> You are running PRO!
Learn the benefits of upgrading -> more customization, better optimization, feature-full of Applications and Settings to enhance your experience

Back UP:

Last Back up: 10/01/10
Backed up on: MMC (Kangal's card)
Back up contents:
__________All System Files
__________All Settings
__________All Programs
__________All Documents
__________All Pictures
__________All Music
__________Videos: Only "Comedy", "Man VS Wild", "Anime" folders

__________________________________________________ ______________________________

***Open Tasks***
Similar to standard Ubuntu or Windows7

__________________________________________________ ______________________________

***Settings***

CUSTOMIZATION
Profile
>Accounts (name, password, account type)
>Speech Controls (profile account, train recognition, recognition tutorial, text2speech)
>Parental Controls (websites, game rating, computer usage timer)
>Reset Settings (to default, to original)

Time & Location
>Time (set date/time, date/time formats, digital/analog skins, timer colour scheme, auto update, daylight savings, world time)
>Region (location, numbers, currency)
>Language (change language for system headings and help, install new language, change keyboard)

Personalization
>Display (screen calibration, screen resolution, screen orientation, font&icon sizes, font&icon styles)
>Superbar (adjust size, adjust colour & transparency, scrolling arrows, Master link, Task Monitor link, Custom links)
>Appearance (wallpaper, screensaver, transparency & colour schemes, themes, UI)

OPTIMIZATION
Power
>Power Plans (Adjust battery level warnings and action, screen and keyboard backlight timer, adjust switched on devices)
>Adjust lid close and power button actions sleep/hiber/shut)
>Power Usage (battery wear status, CPU watt usage)

Audio
>Speaker (master volume, equalizer, adjust individual volume)
>System sounds (enable haptic feedback, enable vibration, change system sounds)
>Microphone (master volume, equalizer, select device, setup noise cancellation)

Maintenance
>Security (firewall, scanner, fixer, quarantine, updater)
>Application Updater (drivers, system files, pre-installed programs, AppStore) [programs installed outside AppStore needs to be updated manually]
>System Recovery (list of previous back ups, recovery manager)
>Problem Reporter (report statistics of firewall attempts, scanner results, program crashes)

Program Settings
>Start up programs (core processes, user-defined, allow-all)
>Default programs (always open X files with X program)
>Notifications (programs allowed to place icons into notifications tray)
>Data Fetch (programs allowed to use connection to internet to update apps, adjust timer, turn off)
>Uninstall programs (list of programs, frequency of use, space taken)

SPECIFICATION
Connectivity
>Networks (internet/lan/sync)
>Phone
>Bluetooth
>WIFI
>WiMAX
>GPS
>IR
>TV & Radio
>Modem

Hardware
>TV out (select display/projector, adjust resolution, colour management)
>Input Devices (mouse, keyboard [on screen keyboard], touchpad, touchscreen [calibration/turn off], controllers [remote/gamepad])
>Office Devices (All-in-One, Printers, Scanners, Fax, Add Device)
>Device Manager (list all device categories and current connection, status, fix/disable)

Technical
>CPU performance and tools (overclocking, memory limits, heat managment etc)
>Run Registry
>Task manager
>Troubleshoot (Help, Problems & Solutions)

Last edited by Kangal; 2011-05-28 at 06:49.

The Following 2 Users Say Thank You to Kangal For This Useful Post:
shardul, The Winter

Kangal | # 5 | 2011-05-28, 06:27 | Report

Notes on the UX:

Haptic feedback (tap=click sounds, Okay/close window=quick vibration, Save=etended vib.)
Kinetic scrolling obviously.
Mouse cursor can be hidden/appear.
Mouse cursor moves to the area being tapped.
If their are 2 areas of tap, the cursor duplicates as to support multitouch and gestures (max 2 cursor)
If a mouse is plugged in the cursor automatically appears, but can still be hidden by the user.
When mouse is plugged out, the cursor automatically disappears.

________MobLing SuperBar__________________________
Same as Win7 but:
The bar is always primarily at the top->bottom notation
The bar contains several districts
The first is the Start district on the far left (27% on min screen size of 100mm horizontally-> 20% when connected to screens larger than 10inches)
The second is the Programs distric beside it/in the middle, covering most (35% -> 51%) of the horizontal area.
The third is the Tools district on the far right, covering a large area (38% -> 29%) 201

The first (Start) district displays the time and date and when tapped/clicked opens the Start menu
The Start district when double clicked/hold tapped displays the desktop

The third district displays status icons of important tools
The third district composes of the Notification Icon, Battery Icon, Sound Icon and Connectivity Icon.

The second district is the "Programs tool" section:

it cannot store any "Favourites" and only shows icons of opened programs
is dynamic depending on the connected screen's size (like Vista/Win7 laptop connected to a large TV: automatically allows more icons to be seen than laptop ie double vision)
it shows 3 items and the rest are scrolled via finger/mouse on proposed device (screen size 114mm wide)
it stores 4 items if device screen size is at least 130mm wide
it stores more items depending on screen size as said before (dynamic)

Tapping/Clicking opens the program if only 1 window of that type exsists (las Win7 Superbar)
Tapping/Clicking opens a "sub menu" dislaying all windows of that program (ie explorer/paint)
Sub menu opens only when more than one windows are open for that program as said.

Holding/RClicking opens up "Master" sub menu when clicked on the Programs area.
This displays a button to switch desktops, list Apps or Show all
This "Master" Sub menu can be attached as a link (as well as Task Manager, Trash etc) onto the SuperBar if screen >130mm wide (more than 3 items).
Links added to the SuperBar can be ordered but always reside behind/right of the running apps.

Clicking on Switch desktop opens a "parallel" device - used only on devices with powerful processor
You can revert to the "Original Desktop" from "Alternate Desktop" by clicking on switch desktop again
Clicking on Show all opens all windows that are restored and restores all Fullscreen to default boxy size
Clicking on List Apps opens up a page where all windows are stacked as 2x3 squares in middle
On the left is scroll up arrow, return to device button (highlighted), Page Number, Wheel button, Cluttered button and scroll down arrow.
The page can be swiped up and down to next page (like iphone but vertically)
Entering wheel mode arranges button from the left (Stacked view) to the bottom
Wheel mode, swipes each window horizontally, zoomed in and program heading underneath
Entering Cluttered mode puts the buttons back on the left side.
Cluttered mode puts each window as their size (restore/fullscreen) on the field and it can be moved around in both horizontal (each program) or vertical directions
Clutter mode zooms out as to allow a full screened application consume 1/4 of screen real-estate

________Notification Bar__________________________
Clicking on this opens a sub-menu displaying icons for:
incoming calls, missed calls, voice mails, sms message, mms messages, alarms, appointments
if setup: eMails, facebook notifications OR Apps that were setup to be opened at a specific time (eg Brain Training)

________Battery Icon__________________________
Clicking on either opens an interactive sub-menu (similar to Moblin) for:
Time remaining (%left until empty OR when charging %left until full), select Power Saver/Balanced/High Performance buttons underneath, Power Options button
And link to advanced options in System>Settings>Power
Battery Icon has 5 bar levels and colours (lime>yellow>orange>red) each corresponds from different battery levels= 85%(5), 70%(4), 45%(3), 25%(2), 10%(1)

________Sound Icon__________________________
Clicking on either opens an interactive sub-menu (similar to Moblin) for:
Volume with haptic feedback, mute button at bottom, mixer (en/dis able alert sounds, en/dis able haptic feedback, bass, treble, balance etc) link to advanced sound settings
advanced settings in System>Settings>Sound

________Connectivity Icon__________________________
Clicking on either opens an interactive sub-menu (similar to Moblin) for:
all open connections on left, all available connectivity types on right hand side, bottom is airplane mode (disable all)
clicking on a connectivity media opens its quick settings to the left on top of "all open connections"
Quick settings include current open connections for that media, dis/connect and status features of all connections, refresh button to search for connections of that media
And link to advanced options in System>Settings>Connectivity

________File Explorer__________________________

Window action buttons:
X = terminates the program
+ = scrolls between the "full screen, max restore and restore" states
- = hides the program into the Superbar

File (6): Open With, New, Rename, Delete, Send, Properties
Edit (6): Undo, Redo / Cut, Copy , Paste, Paste shortcut
View (6): Zoom, Sort / Custom, Tiles, List, Group
Tools (6): Select All, Invert Selection / Refresh, Scan, Customize Folder, Help

Full screen:
Opens the window to the whole area below the Superbar
The Superbar is hidden excluding the Start district
The rest of the Superbar regions are occupied split horizontally into two regions
The top area is occupied with the "Navigational commands" (back, refresh, forward) on the left side and the "Window action buttons" on the right
The bottom area is occupied by the menubar
There is no longer skewed arrows on the corners to alter size of the window

Max restore:
Same as Full screen except the Superbar is reverted to its original state and the horizontally split regions are now located underneath the Superbar.

When window is restored:
It can be moved within the confines of screen
It can be resized to desire with "quality" limitations
When moving it will attract/jump unto the sides of workspace like OSX

Restore: 3 variations/sizes (min. horizontally size, min. vertical size and any variations larger than either)
1st is boxy:
minimize, maximize, close buttons on right
menubar displayer on left
forward/back buttons "right of" menubar displayer
scroll bar on right
to move boxy, hold space between forward button and minimize button
to change size drag skewed arrows on bottom corners
cannot be vertically shrunk anymore than default
cannot be horizontally shrunk anymore than default

a max of 4 icons can be showed unless stretched
3 x boxy explorers can be fitted side-by-side on screen
When the horizontal size of the boxy state increases more functions can occupy new space.
After the boxy reaches the same horizontal size as the "rectangular state" the Refresh button emerges in between the Forward and Backward buttons and a Search bar emerges on the right side of the Menubar when it is opened.

To go to a boxy state from the "Max. restore" state or from any variation of restore (except Boxy state) the user must swipe the size by decreasing the horizontal size.

2nd is rectangular:
same as boxy but
area between forward button and minimize is greater
menubar is larger/extended
the search/help bar is on the right corner of menu bar

a max of 4 icons can be showed unless stretched
2 x rectangular explorers can be fitted on top of each other
2 x rectangular on top plus one boxy on side can be fitted

To go to a rectangular state from the "Max. restore" state or from any variation of restore (except Rectangular state) the user must swipe the size by decreasing the vertical size.

3rd is any:
must have horizontal size larger than boxy
must have vertical size larger than rectangular if horizontal size is smaller than rectangular
if 3x icons fit horizontally, the searchelp bar will appear

________Mobile Firefox__________________________

Same UI as Google Chrome (its great for touch) except:
bookmark button is on right of searchbar
stop button is on right of refresh and left of home button
downloads open in ther own "downloads list explorer" (ie standard Firefox)

______________________________________

Today
Side: (4 unchangeable)
Organizer-> Calendar,tasks,App plugin=brain training,date finder,journal viewer/edit
Contacts->detail,pic,sketchnote -> Call/SMS/eMail
Messages-> iphone-like chat for contacts+reply (attach file)
Clock-> Time,alarm,world time

Touch Opens up: Today App
Shows summary screen: (fixed) 1 city weather, 1 trip traffic, top 5 news slide-notes with links
links to long story Top 5 local news, Top 5 national news, Top 5 international + links to more news
links to world weather + national satellite + weekly forecast
links to traffic of city/cities

Slide right = Second summary screen: User customizable content with links
Horoscope page with summary of your horoscope (links to other ones, description about horoscopes)
Hollywood Gossip
Politics
TVguide of top 5 most anticipated shows, or user selected
wirelessQuota (log in, chart, options etc)
facebook, myspace, twitter etc
Net blog news (engadget etc)

Slide left = Moblin Today screen: links to Today's Entertainment content
Today's joke/quote/riddle/picture/photo/wallpaper (twice a day->6am, 2pm)
Daily suggestions: Why don't you buy flowers for someone today?
Today's questionnaire (2 alternatives -> answer+statistic at 3pm)
Today's puzzle:crossword,sudoku etc yesterdays answer

Favourites
Side: (6 selectable)
Camera
Sketchpad
Media Player
IE
MSN
AppStore

Touch Opens up: My Favourites folder
Custom select-size(tiled any order)
Search & Helpbar (links in Fav's)
Shows links to Apps, Folders, Pictures, Websites etc ... the first six of order have distinct line, they enter Favourites folder [exit saves order]

Files
Side: (4 folders unchangable)
Documents
Pictures
Music
Videos

Touch Opens up: My Documents Folder
Custom select-size(tiled any order), Tiles View auto-size(name/date/size), List View auto-size(name/date/size)
Search and Helpbar (Media)
Enter next-order folder: Documents, Pictures, Music, Videos
Only the corresponding media types + folder + notes can be stored in Pic,Music,Videos
Documents folder can hold all media types. Documents folder contains Downloads, Favourites + Custom folders

Programs
Side: (6 recently used programs)

Touch Opens up: Programs List
Custom icons select-size(tiled any order), Icon View auto-size(name/date/size), List View auto-size(name/date/size), Group View auto-size(auto category->can be changed in properties)
Search and Helpbar (Programs)

Media Streamer/Bitorrent
Notepad
Getting Started
eBook (Acrobat Reader)
Radio
Sync/Backup
eMail client (Outlook)
Journal
Phone
Search program (specifics, help information)

System
Side: (2 folders uncangeable)
My Device
Settings
Open Tasks

Touch Opens up: ROOT
(My device, Settings and Portable media=SDcard,HDD,CD,DVD,BRD,digital cameras,mp3 players etc)

My Device:
Device info (owner, processor, RAM, HD, OS)
Device rating (benchmark for processor, RAM, graphics, gaming, HDD speed, battery life -> asess system)
OS (Version, time installed, Product ID, Update OS, Upgrade to Pro)
Back up: last backup, installed on

rimaryHDD compartment, portable HDD, portable disk, portable card)
Usage (Call period)

Settings:

Phone Settings > call settings
Connectivity (bluetooth manager, IR manager, WIFI manager, WiMax manager)
Network (LAN, internet, antennae)

User Accounts (Default->password/name etc, Guest->parental controls)
Apperance (change UI, change theme, change colours)
SuperBar = add/disable scrolling arrows, add/disable links, adjust size, adjust color, adjust transparency.
Language & Region (change language, for keyboard, for system headings and help, install new languages)

Start up programs (core, user-select, allow all)
Programs (default programs, uninstall)

Security (scanner, fixer, quarantine, reporter, updater)
Problem Reporter (crashes, bugs)
Application Updater (drivers, system files, pre-installed programs, AppStore) [programs installed outside AppStore needs to be updated manually]

Hardware (installed devices, device properties: etc printer, scanner, digital camera, keyboard, mouse)
Input devices (mouse, keyboard, touchpad, touchscreen, controller, IR)
Display (text sizes, screen resolution, connect proj/display)

Date & Time > set date/time, date format, time format, auto update, daylight savings, colour, digital/analog,

Audio (speaker volume, headset volume, adjust Bass/Treb/Balance, Sound recorder)

Power settings (adjust devices, power plans, adjust sleep/hibernation/shutdown buttons and battery levels)

GPS, Speech Recognition, Sync, Recovery,
Task Manager
Run Registry
Reset: To Original, To default

Shutdown
Side: (5 actions unchangeable)
Restart
Turn Off
_________________
Hibernate
Sleep
_________________
Log Off (desktop ver)
Switch user (desktop ver)
Lock

Touch Opens up: XP Style Closer
Background slowly greys
Choose: Sleep, Restart, Turn Off or Cancel

Last edited by Kangal; 2011-05-28 at 07:03.

Kangal | # 6 | 2011-05-28, 06:27 | Report

another reservation, sorry, updating

File Explorer UX:

Explorer Fullscreen (wasn't implemented):

Explorer "Maximum Restore":

Explorer "Maximum Restore" with File Menu clicked:

Explorer "Maximum Restore" with Edit Menu clicked:

Explorer "Maximum Restore" with View Menu clicked:

Explorer "Maximum Restore" with Tools Menu clicked:

Explorer "Restore" (minimum portrait 'boxy' size) with Menu showing:

Explorer "Restore" (minimum portrait 'boxy' size) with Menu hidden:

Explorer "Restore" (minimum landscape 'recty' size) with Menu hidden:

Explorer "Restore" (minimum landscape 'recty' size) with Menu showing:

Explorer "Restore" (minimum landscape 'recty' size) allows you to stack two on top of each other in 5" screen:

Explorer "Restore" (minimum landscape 'recty' size) allows you to stack two on top of each other in 5" screen, can show upto 4 open windows in 5" screen:

Explorer "Restore" (minimum landscape 'recty' size) allows you to stack two in (5" screen) on top of each other and a boxy beside to show 3 open windows:

Explorer "Restore" (minimum portrait 'boxy' size) allows you to stack upto three windows side-by-side in 5" screen:

Last edited by Kangal; 2011-05-28 at 08:09.

The Following User Says Thank You to Kangal For This Useful Post:
Joseph9560

kingoddball | # 7 | 2011-05-28, 07:05 | Report

Any images to thus UX?? I have a PandaBoard and beagle board if you want someone to test this.... (ni touch screen) as long as you have mouse support... Pick your hardware..

Omap4 dual core @1ghz
Omap3 @720mhz

The Following User Says Thank You to kingoddball For This Useful Post:
Kangal

Kangal | # 8 | 2011-05-28, 08:05 | Report

still uploading

(have the Superbar, and the Start Tab to go... will do these later on in the night cause going to cinemas shortly with gf, about 90 more pix togo, Hangover2 is lmao)

The Superbar and Items:

Stock design:

Empty Notifications tab:

New Notifications:

Battery (85%):

Battery (70%):

Battery (45%):

Battery (25%):

Battery (10%):

Battery (2%):

Battery (3% Charging):

Battery (26% Charging):

Volume tab (100%):

Volume tab (75%):

Volume tab (50%):

Volume tab (25%):

Volume tab (0%):

Volume tab (Mute):

Volume tab (Mixer):

Connectivity tab (overview):

Connectivity tab (bluetooth):

Connectivity tab (bluetooth searching):

Connectivity tab (bluetooth discovered):

Connectivity tab (bluetooth connecting):

Connectivity tab (bluetooth connecting2):

Connectivity tab (bluetooth connected):

Connectivity tab (bluetooth2):

Connectivity tab (wifi):

Connectivity tab (wimax/misc):

Connectivity tab (phone/3G):

Connectivity tab (disable all):

Manage Running Applications (R-click/long-press superbar):

Show all [running programs/applications]:

List Apps [running]:

Switch Desktop [OSXesque] (alternate desktop):

Switch Desktop (alternate startmenu):

Switch Desktop (notification is universal):

Last edited by Kangal; 2011-05-28 at 14:39.

The Following User Says Thank You to Kangal For This Useful Post:
Joseph9560

kingoddball | # 9 | 2011-05-28, 08:45 | Report

Love it.. The only thing I don't like is the My Device icon... I hate windows!

Love the design! Throw me some instructions and I will test away!

Kangal | # 10 | 2011-05-28, 16:30 | Report

Here is the link to the Start Menu:
http://imageshack.us/g/651/pdesign28bshutclk.png/

(I'll link the imgs directly to here tomorrow, right now, I need sleep)