Concept UI for Windows Mobile Centre made by me

[gxsaurav]

Well, Mehul isn't online so I am not sure which section to post this into. Maybe Reviews section. Mods, plz move this thread to appropriate section as applicable.

You can also read this article on my blog

Windows Vista comes with Windows Mobile Device Center which support only for Windows Mobile Devices. I thought that this should be changed, so I made this concept User Interface for my own application which I think should be bundled with Vista.

Presenting Windows Mobile Center, the solution to all your mobile phone & PDA needs. Everything you are about to see is made on a system running Windows Vista Ultimate with Photoshop CS3 & Axialis IconWorkshop 6. I have not made a single icon in this mock UI because everything is already in Windows Vista. It is very easy for developers to make the backed of this application.

When you first start Windows Mobile Center this is how it looks like. A simple welcome screen telling you what Windows Mobile center is for & what can it do for you. Just click on "Select Device" to select the device you want to manage.



You now come to the second screen on which you are asked to select what kind of device you have, whether it is a Mobile Phone or Pocket PC or PDA or UPMS. Just click on the type of device you have & click on "Next". For this article I selected Mobile Phone because I have a K750i & it is easier for me make a mock UI keeping a phone in mind. Obviously the phone is in my hand, that why. .



After selecting "Mobile Phone", I am given a list of all the mobile phone Windows Mobile centre can sync. This database is plug-in based & new phones can be added via simple Windows Update. Here for the article I selected K750i because like I said, that is what I have in my hands right now so easier to make this UI for me.

You are given information for your phone & a photo which makes it easy to visually identify the phone from the list. You are also given 2 checkboxes stating whether you want to let Windows Mobile Centre automatically try to connect using the best & fastest available connection or whether you want to select a connection type manually such as Bluetooth or WiFi or IrDA or a Data Cable. For this article I have selected to connect automatically. Now click on connect.



Windows Mobile Centre now automatically tries to find the best & fastest possible connection available. It searches & finds Bluetooth connection.





Once the connection is established it displays the status of the phone such as Phone's name, battery left, connection type, free memory in memory card or phone itself, IMEI Number, firmware etc. It also tells you whether the phone is synced with Windows Mobile Centre or not. Since this is the first time, it is not synced & it gives you an option whether to sync right now or not. Without syncing you cannot see the saved Phonebook, SMS, and Mail etc. You can sync the whole phone anytime using the green Sync button at the topmost toolbar alongside Configuration Options & Help button. Or in this case for the first time you can also sync using the options given below the notification.

You can also get advanced information using this window. Like clicking on Bluetooth Icon gives info in a new palette like which COM Port it is connected through, which Bluetooth device it is using etc. Same goes with battery.



Once the phone is synced, you can start working on it the way you like. Some basic phone tasks are available in the right click context menu or the following toolbar button. You can mouse over the toolbar buttons to get information regarding what that button does. Let us go through all sections one by one.

Contacts Section. : After you sync the phone with the computer, Windows Mobile Centre automatically copies all the contact to Windows Contacts folder through which these are also available in Windows Mail, Windows Calendar & other such Windows application like Live Messenger etc. Those contacts which are not in Phone but are there in Windows contacts are also synced to the phone.

The contacts are available in a list view depending in whether you have selected to show Phone contacts or SIM contacts. You can search for a particular contact using the search bar provided at the toolbar. You can simply right click on the column to show more info as required such as other phone number, fax, address etc. To copy a contact from Phone to SIM, either drag & drop it or simply copy paste using the keyboard or right click menu.

The toolbar provides access to some basic tasks available for contact list, like refreshing the contact list or adding a new contact to the contact list, editing an existing contact, deleting a contact or simply sending a message to your contact using the computer. You can also select whether the message is a SMS or E-Mail.



The call logs section shows the recent call logs. It shows all calls, missed calls, answered calls or dialed calls as selected in the left hand pane. You can again perform basic tasks such as refresh the list or add an unknown number to your phone or delete the entire recent logs or send a message to a recent number. You can also search for a particular caller in the call logs.



The Messages section provides you a view at the SMS ails you have in your phone. It shows your phone Inbox, the saved messages, drafts, sent messages & Outbox. From here you can simply click on any message & either forward it to another number, or reply to that sender or delete the SMS or refresh the SMS list. You can also select to write a complete new SMS using the new message button in the toolbar.



The Files section gives you option to browse the phone's memory or the memory card in the phone. Although the memory card is also available in Windows Explorer as a removable drive. The explorer is just like Windows Explorer & you can navigate or sort. You select the type you want to view the folders as, or simply right click in the Explorer area & select to view as large or small icons for folders. If you have selected to show thumbnail previews of files, then it will show the images as thumbnail by simply downloading them to computer in the background.

Using the toolbar, you can simply refresh the file list or go one up level, create a new folder, delete a file or download the file to a location in the computer or upload a file to the location in Phone. You can also install JAVA application using this Files view because K750i supports installation of JAVA Applications. You can also search for a particular file in the Phone or Card memory.Single clicking over a file or folder gives its information in the File Properties pane such as file size, location, type etc.



When the user selects to send a new SMS, he gets a simple notepad like Window.



I am creating the organiser Windows right now, but due to studies it might be slow

Please leave a comment about how this Concept User interface is. Any improvement advice is very much appreciated. We might be able to make this a real application

[Choto Cheeta]

Already read at ur blog... Gr8 Work !!!

[gxsaurav]

I got one tip in a similar thread at Neowin. I do admit that in final version the Fonts in sidebar look more big then required while the Icons are 32X32. Do you think changing to 24X24 pixel icons in Sidebar along with small font size be better or should I just change the font size in sidebar?

[Charan]

One word .... SEXY

[vish786]

@gx_saurav


what r u exactly doing, are u modifying the existing windows mobile centre to support all sort of phones???

[iMav]

damn at first i thought after looking at the screenshot y havnt i syncd my 6600 to vista yet ... then realised its a mock UI .... well i would say that the text on the left should be of the same size as that in ur 3 screenshot ... else its amazing ... i would too really wanna see the facility to sync any smart fone to vista

[Choto Cheeta]

@gx_saurav

ICON looks fine, and may be user should have option as in Vista to play with the ICON size

but yeah in any case, u would need to work with the Font size

[gxsaurav]

Originally Posted by vish786

@gx_sauravwhat r u exactly doing, are u modifying the existing windows mobile centre to support all sort of phones???

Kind of yeah. Windows Mobile Device Center comes with Windows Vista however it only works with WinMobile devices & not just any smartphone or mobile phone.

This goes beyond what WMDC does, more like WMDC version 2 or 3.

@ Choto, I will try both small font & icon & just small font alone. Might change toolbar fonts to 24X24

Lets call the old version 1.0 & new one 2.0

Now in 1.0, the toolbar as well as sidebar icons are 32X32 pixel big, while the sidebar font is 24pixel in Photoshop. The font used all over is Segoe UI.

I moded the contact list first, & showing it here. Now there are 2 renders.

1st is Toolbar & sidebar button at 32X32 Pixel, but the sidebar font is reduced to 18 pixel which now looks more sober.



2nd is same thing but with 24X24 pixel toolbar buttons.



The user will have choice to change the toolbar & sidebar icons as well as font size so big icons is not a problem. Is it ok now or should I further change?

[goobimama]

One thing. What are those minimise/maximise/close buttons for?

[gxsaurav]

Originally Posted by goobimama

One thing. What are those minimise/maximise/close buttons for?

R U High today? I told you not to try Wine.

Minimize button is for minimising the applition to taskbar or tray as specified by user in options

Maximize, zooms the application to full screen, so that if you are running short on screen real estate to look at your contact list or File browser.

Close button exits out the application or Minimises to tray as specified in option.

[praka123]

good work there.

[iMav]

Originally Posted by gx_saurav

R U High today? I told you not to try Wine.

Minimize button is for minimising the applition to taskbar or tray as specified by user in options

Maximize, zooms the application to full screen, so that if you are running short on screen real estate to look at your contact list or File browser.

Close button exits out the application or Minimises to tray as specified in option.

gx he mac user ... maximzie nahi malum

[gxsaurav]

Lolz...ya it doesn't have a zoom button.

Anyway, this application is all about Productivity & Layout. I am trying to get proper tango icons & Mac like icons, might port this application....i mean UI to other OS too

[sachin_kothari]

waiting for the final thing.
this would be simply great

[Lucky_star]

UI is great.
32X32 pixel toolbar buttons is better. Almost everyone has got atleast a 17 inch. So large icon size won't be a problem.
And Saurav, why don't you add an update function, so that information about newly released devices can be downloaded and added to the list of existing phones or PDAs.

[gxsaurav]

Originally Posted by Lucky_star

UI is great.
32X32 pixel toolbar buttons is better. Almost everyone has got atleast a 17 inch. So large icon size won't be a problem.

Ok, then I m keeping 32X32 pixel toolbar icons. What about the Sidebar font size? Should I decrese it or keep it as it is right now. Comon guys, let me know what would u like to prefer. Keep in mind that the application will let you customise icon & font size yourself. This is just for the mockup.

And Saurav, why don't you add an update function, so that information about newly released devices can be downloaded and added to the list of existing phones or PDAs.

Updates, as mentioned in the above post are available through Windows Updates.

[Lucky_star]

^^Oho, didn't notice it.

The sidebar font should be decreased a bit, but not much. Try moving the mouse from the top icon to the bottom one. Its little lengthier and demands hand movement. Therefore, a single point decrease will do. And similarly, you should increase the font size of the sub-headings in the sidebar. I mean, those 'phone' and 'sim' titles under the Contacts should be made little bigger. they are too tiny

[goobimama]

I got a bit confused. I thought this was an interface on a phone...but then seconds later it was clear to me. I thought I'd deleted that post...

[gxsaurav]

Sidebar font is Size 18 for Segoe UI while the sidebar subsection font is size 12. I will change it to Size 16 & Size 14. In the real application it will also be user configurable.

It's windows, so you can cycle through the sidebar sections using Tab keys too.

. Try moving the mouse from the top icon to the bottom one. Its little lengthier and demands hand movement.

Which icon, I showed all section, thats why.

Anyway, going for exam now, c ya after 2 pm

I got a bit confused. I thought this was an interface on a phone...but then seconds later it was clear to me. I thought I'd deleted that post...

Lolz..., no Bro, this is not v(ista)Phone

[Lucky_star]

This looks good. Actually I couldn't see your post number 8. That image didn't load then. And after seeing all the three font sizes, the 18x18 is the best I think now. Ayway, you have kept the option of changing icon size.

[gxsaurav]

Updated the first post with new renders made with smaller font size & added icons to Messeges Section

[enticer86]

luks pretty kewl

God... India has so many hidden champions

[gxsaurav]

Thanx, organiser window is 30% done, I m going with a 2nd toolbar to jump between ToDo, Tasks & Appointment list , Also included is a calender in Organiser.

By the way, I took the organiser Idea from Outlook 2007 & my Phone's inbuilt method. What would you guys like to do with an organiser in such application. Gimme some ideas I will try to include them.

[iMav]

apna regular:

meetings
flights
project completion
birthdays ... blah blah

[gxsaurav]

Hmm...ok. Meetings, flights, project completion will come under "Appointment". I am making the "Notes" Section first cos that is available in K750i & various symbian, WinMobile & Sone Phone.

The Organiser Notes Part is complete. If your mobile phone or device supports notes, then you can sync them automatically with your Windows Notes Gadget or Outlook Notes. To access notes, click on the notes icon in the toolbar which will show you all the notes in your phone. Pressing the refresh button will sync the notes from your computer to the phone & vice versa. Here are the 3 views in which you can see your notes. I prefer the detail view though but since it is upto the user he can chose to look anyway he wants by clicking on the view type icon in Notes toolbar.

Thumbnail View



Details View


Text view



The area below the calender shows your tasks whether you are managing Appointments or Notes, all the time. To set a new task or appointment, select the date from the calender then the middle pain will change accordingly (this i have to make). For appointment select the time slot, for tasks, well...just select the timeslot again & double click on it to open a new Window in which you can set task.

When everything is done, press the grand sync button at the topmost toolbar. This will sync every note or tasks with the phone, then simply exit Windows Mobile Centre