Concept UI: Windows Password Center

Windows Vista lacks a good password management application by default which all other Operating Systems provide in one form or other. Since I already have a good idea for an UI, I am presenting here a concept UI for Windows Password center.

It’s a very simple application. The best password management tool available in Windows is AI Roboform but it is limited to Webpages only & can’t remember passwords for Windows Live Messenger or Outlook 2007 etc. Windows Password center acts as a single platform for all kind of passwords. Any application can save the password in this, & once unlocked, as long as it is not locked, anyone application can use the passwords stored.

This isn’t the complete UI. Just 20% infect, but the layout is final. More info & final screen shots & UI to follow soon.

Concept UI: Yahoo Messenger for Mobile Phones

I was looking at the state of Mobile IM clients out there today, & it’s not that good. None of the official companies such as Yahoo or Google or Microsoft are releasing mobile version of their IM Client based on JAVA which can be used on all phones. Yahoo has released Yahoo Go but it is not JAVA based which restricts it to only a few phones out there. Microsoft has Windows Live Messenger for Windows Mobile 6 but not for any other phone out there such as my K750i. Google isn’t any different, though they at least have a mobile E-Mail client based on JAVA.

The possibility of JAVA for Mobile is endless. It is a lifesaver for restricted OS based phones such as Sony Ericsson or Motorola. These phones don’t support third party native software but have full support for JAVA software.

I mostly use yahoo messenger, so I decided to make a concept UI of Yahoo Messenger for Mobile based on JAVA which I think what it should be like. I call upon any J2ME developer who is interested, I would be glad to help in making the front end UI part if someone can contribute to make the back end software engine. The JAVA API for Yahoo Messenger is already documented at jYMSG Sourceforge webpage & using this API anyone can make a JAVA Mobile based Yahoo Messenger client, I would be glad to provide the UI part if required. More information can be found at the DevX webpage. Here is how the concept UI looks like. This is a very basic text & emoticon only version of Yahoo Messenger which I have tried to make.

When the user starts the application it loads & gives the user the following screen.

The user is asked to enter his Yahoo ID & Password. After that he can select any one of the given options as shown below the login information section. If he selects to save the login automatically his username & password will be saved in the phone as long as the application is not removed. Next time when the user starts the application it will automatically connect to Yahoo Messenger. After entering info he clicks on “Sign In” & messenger connects to yahoo showing a progress bar.

Once the user logs in, he is shown the groups of his Yahoo messenger & the online & offline contacts. By selecting in “Settings” under the “Menu” button, he can select whether to show offline contacts or not.

By default Messenger sorts contacts by their status. He can click on any group name to expand or collapse that group. To start a chat he just needs to click on the name of the friend which will then give the chat Windows. The Contact List window also notifies him of the unread mails in his Yahoo Mailbox at the top menu bar, as shown in the image.

The interface is based on tabs. The current selected tab is shown in black color, the background tabs are shown in white color while any offline or unread Message he receives is shown in another tab which flashes in golden color until the user select to show that tab. The application notifies the user of unread messages in various ways such as flashing the tab, or vibration in the phone or playing a notification sound. All this can be selected in the “Settings”.

Here are how the Menus & Settings look. The menu background is plane white color, & when you mouseover a menu item, its color changes to blue & a hover rectangle is shown on top of it to notify that this item is selected. To open a menu item, either click on it or press the keypad button.

Menu at the first Sign in page, for settings

Connection Settings selected & Settings Page

Settings about how to notify the user. Just to show here I made an image for the checkbox, however in reality it will be replaced by JAVA Checkbox

Font size can be increased or decreased anywhere.

User preference to set the status & whether to show offline contacts in list or not.

Menu for Contact List

Menu while chatting to superman

Emoticons Section. You can either type in the emoticon code, or select from the list

    

You might say that the interface is very plane & without much images. The reason is that when we make something for JAVA Mobile, developers have limited amount of JAVA Heap size or JAVA RAM to work with. Even in my K750i the JAVA heap size in just 1 MB, due to which small file size of JAR file & low RAM requirement is essential. If I get a willing J2ME developer then we will make the Messenger first as you see here, & after that we will add images as & where required. Since this is a front end, it can also be slapped on the back end of Symbian OS version

Concept UI for Windows Viewer

Windows Vista has a new technology inbuilt called Windows Preview. Using this you can preview any file right there in the Explorer preview pane as long as you have a compatible plug-in installed.

However if you are like me, then you don’t have the preview pane turned on because it takes some desktop real estate. Now, we still have live preview of Images right there in Explorer but they are small. What if we want to preview them without opening any application which is associated with it like Windows Photo Gallery?

I present you Windows Viewer for Windows Vista. It does what it is supposed to do, just shows a preview of the file in a new window which you can exit out using escape key or just click outside anywhere or use the close button. You can set this preview to be full screen or any size you want by dragging from any side.

To activate Windows Viewer, just click on a file & press Spacebar, it will open it instantly. By default various image, audio & video formats are supported out of the box & if you have Adobe Reader 8.1 installed you can also preview PDF Files right there in Viewer.

Suppose you are in a folder with many files of different type, you can simply activate Viewer then use the toolbar arrows to navigate to any file in Viewer or just press keyboard left or right to go to next file or previous file. This is how a normal Image preview looks like in Viewer. You can navigate back or forward & zoom it or zoom out. You can also make it full screen by maximizing it.

Free Image Hosting at www.ImageShack.us

Same goes with Document View, here I have opened a multipage PDF but it doesn’t matter what document you open be it Word Document, Excel Spreadsheet or PowerPoint presentation, it will show the page thumbnails in the sidebar using which you can navigate to any page you want. You can zoom in & zoom out too, also just click on the page thumbnails to navigate to that page. To go to any other file in that folder which can be seen in Viewer just use the toolbar arrows. This how document preview looks like.

Free Image Hosting at www.ImageShack.us

When it comes to previewing Audio Files, well..just select & press spacebar. It will pop open a Audio preview of that single file at one time only. Either press escape or close the window or leave the Viewer & it will continue playing the audio file unless you start to see preview of some other file or close it manually.

When you try to preview a video, the viewer gives u the same tool as before. usign the keyboard left right arrows or the toolbar arrows you can switch the viewer to show a preview of another file in the same folder. This is handy if you have a folder with multiple Videos or Images, just one of them then click on the arrows or use keyboard arrow to switch to the next image.

If you try to preview an Archive file such as RAR or Zip, well…although the size & extension etc is different but inside they all look same. You simply get the toolbar arrow for navigating to the next file in the folder where u activated the preview & an extract button which when clicked, extracts the files in the same folder where the archive is, making a new folder which has the same name as the archive.

Concept User Interface for Windows Mobile Center

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 included in Windows Vista. It is very easy for developers to make the back end 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.

Main Window

You now come to the second screen where you are asked to select the 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" or click on automatically Detect to search for all compatible devices.

Select Device

After selecting "Mobile Phone", I am given a list of all the mobile phone Windows Mobile center 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 two checkboxes stating whether you want Windows Mobile Center to 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.

K750i Selected

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

Searching for a connection

Bluetooth connection found

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 Center 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

Phone Status

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 Center 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.

Contact List

Suppose you want to send SMS to someone. Just click on the contact & click on the new Message toolbar button. You will be given a simple window to write your SMS which will be then messaged using your Mobile Phone. You either enter a number manually or select from contact list. If you enter an E-mail ID, the message will go as an E-Mail through your phone & GPRS/EDGE connection using the settings for E-Mail set in your phone. This is how the Message Window looks like.

SMS Window

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.

Call Logs

The Messages section provides you a view at the SMS 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.

Messages

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.

File Browser

The Organizer 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 up to the user he can chose to look anyway he wants by clicking on the view type icon in Notes toolbar.

Thumbnail View

Thumbnail View

Details View

Details View

Text ViewText View

Compression Plugin made by Web Hosting