Subscribe to my blog

Subscribe to my blog

Follow by Email

Thursday, October 20, 2011

Harry Potter - Marauder Map Application - UI Design




Introduction:
The Marauder Map is a magical map in Harry Potter series. At any given time, the map shows the location of the person in the castle. This quick design proposal captures the idea of porting the Marauder Map into a software application with the following primary and secondary goals.


Primary Goals:
- Ability to locate a person
- Ability to track the location history of the person in a time line


Secondary Goals:
- Ability to see the location history across various calendar dates.
- Ability to load / choose different maps


Description of Idea:

The Marauder Map application uses Search functionality as the main function, along with Time Line scroll. Like a typical map application (Google Maps) this app has the ability to zoom-in, zoom-out, drag-across-navigation. By default the user must Sign-in, to access the app. The sign-in is a security measure, to show only the user's friends' locations and time-line history.



The Screens

(The background pencil sketch art courtesy - Google Image Search)

After the user successfully signs-in, the following user interface is shown.


The UI explained (Showing where Albus Dumbledore was, at the beginning of the Time Line):

 







The Major Components:


The Search Box
This is a versatile search box. As the user starts typing the name, the map will populate the pics of people (from the user's friends list) and their location in the current time. The below shown example shows the suggestion as the name is being typed, and the location of people found in the search result.




The search result:


After the person is located, it shows the path he/she travelled across the castle.



The Time Drag Slider & Calendar:



The Time Drag slider has a marking to it's right, in terms of icons.
The time ranges from midnight (top moon icon) to Noon (mid sun icon) to midnight (bottom moon icon).
The time drag has two pearl shaped markers on top and bottom.
The bottom marker's position denotes the current time.
There is a slider on top which can be used to drag vertically across the time line. According to the handle's time position, the selected user / searched user's location will be shown in the map.
The Calendar (pop-open component) can be used to select a different date. Ideally the calendar should not allow the user to select a future date, or a day on which the recording / tracking was not performed.The UI shown above does not capture this consideration.

Other components:
The major other component is the SETTINGS UI for this app. This is where, the user can add / manage his friends list. Also changing the default map, the duration of time-tracking-to-be-done etc can be set here.

Human-Computer Interaction:
Mouse is the primary tool for interaction. Clicks and drags form the majority of action-metaphors here.

Possible Development Media:
1. Native Desktop application (Windows / Linux / OSX)
2. Rich Client Application (Flash)\
3. Web-only Application (HTML, CSS, Javascript) Note : Due to technical limitations with HTML and Javascript and browser issues, some UI changes may be required for proper implementation.



Monday, October 4, 2010

Car Pool - User Interface Design - Part 3

So that was the attempt to capture some idea of how a web application for Car Pool management can be built.

I did not capture so many items in my mocks, especially
- Filters
- Advanced Search Options etc
- How this could be linked / data exchanged with Facebook / MySpace etc.
- UI mocks for Reports (Fuel saved, people travelled, etc etc)
- Settings UI

If time permits, I may work on this again. :-)

And here is a visual mock that gives you some rich visual feeling... Click to enlarge.






Related Posts :
Car Pool - User Interface Design - Part 2
Car Pool - User Interface Design - Part 1


Car Pool - User Interface Design - Part 2

Now that the flow diagram is ready, let's look at the mock ups..

Registration
Registration with Email ID as user name and preferred password.


More details like name, car, location etc



After registering successfully, the welcome screen appears...

  

 Joining a Car Pool - Sketches

Starts with searching for a route...





Displaying search results... with 3 options to interact with. 1. View Route - opens a map. 2. Request to Join - Sends an online request. 3. SMS now - sends an SMS to the car pool owner. If the owner replies back with predefined set of keywords the request will be approved automatically.



Mock for sending an SMS . A Layer pop-up opens when the "SMS Now" link is clicked.


Online Request - A layer pop-up opens to confirm the request


UI - After joining a car pool. Shows the details of car pool, the days, list of people , option to send message etc




UI - Shows the list view of all "My Commute" entries





 Creating a Carpool - MyDrive





End of Part 2

Continue reading :
Car Pool - User Interface Design - Part 3
Car Pool - User Interface Design - Part 1

Car Pool - User Interface Design - Part 1

Was taking rest at home and then I came across the news that bus traffic was hit due to some strike by the drivers. Then it flashed - the Car Pool. How about designing a website that enables car pooling along with social networking features?


So picked up a notebook and prepared some sketches for an application that attempts to answer the questions like 
- Joining a carpool instantly (Via SMS)
- Creating a carpool and inviting people


I could think about extending the basic scope of the application by porting a version to Facebook, MySpace etc and making collaboration more fun and easy. For the initial sketch, I preferred to go with a standalone web app, that could do both features mentioned above.


So here are the flow - diagrams

User Registration
 


Creating a Car Pool - My Drive


Joining a Car Pool - My Commutes


End of Part 1


Continue reading :
Car Pool - User Interface Design - Part 3
Car Pool - User Interface Design - Part 2

Thursday, January 28, 2010

Is burrp.com going too heavy? Time for acquisition?

Ever since I noticed burrp.com launched, I was following it curiously. But recently I can see so many changes. Burrp.com has become overloaded and slowly deviating from their main focus. What started as a Restaurant and Spa review has now become a central place for Entertainment that includes selling tickets, shopping yellow pages and more.


Lets say, they launched the site and people are "wow"... and soon they offered widgets to enable other site owners to feature burrp.com contents, which was really great. But then, the focus slowly changes and new tabs gets added into the system. Shopping is one category which I do not think has any sensible meaning with the theme "burrp". Looks like, Burrp.com wants to capture all categories or just that they are listening to every feature request they receive from the users making the site looking "TOO MUCH".

Why does burrp.com going heavy?
  1. For Sale - Looking for possible acquisition by some big names
  2. Poor Focus leading to loss of unique identity (yet another site that rides on 2.0 wave)
  3. Trying to please all their user base


Right now I do not find any major difference between the crap sulekha.com / justdial.com and burrp.com. Just that burrp.com has a clean UI and has some social networking elements.





Tuesday, January 19, 2010

Usability in Automobile - a thought

Car - Mobile Phone Holders
Mobile Phones are part of everyday life now. Many times, I've seen drivers (including myself) struggle to take the phone out of pant pockets, shirt pockets while driving. Like ash-trays and lighter-sockets became part of standard equipments, why not a universal mobile phone holder can be standardized in all dashboards.

Friday, November 20, 2009

USB Flash Drive Booting & Installing Windows XP in your Netbook, Laptop and Desktop

It took a couple of hours to figure out there is a simple and new way to boot and install OS using USB flash drives in Netbooks, Laptops and even our desktops.

Note : Hardware that are older or that doesnt support Booting from USB ports cannot be used. So make sure your hardware's BIOS has support for booting through USB Floppy, USB Disk options. Consult your hardware's manual to find out.

Items needed:
1. USB Drive (more than 1 GB)
2. Your Windows XP installation Disk
3. WinToFlash - Free utility to make a USB drive bootable (NT, XP, Vista and Windows 7). Also it copies the OS installation files
4. Obviously a prep hardware - a working desktop or laptop with CD Drive.

How to make a bootable USB Flash drive?
Earlier, creating a bootable USB flash drive involved a tedious process of downloading a HP flash drive format utility and working with BartPE utility. But now, WinToFlash has been launced. The 0.5 beta version is really good and conveniently stable, such that it works as a final release version. WinToFlash saves the cumbersome process of formatting USB drives and copying disks with its own Wizard.

Phase 1 - Preparing USB Flash drive with OS install files
1. Download WinToFlash and run it
2. Proceed ahead with the default wizard option. It will automatically detect the USB drive and confirms with you to format it. Once permitted, it will format the USB drive.
3. It will ask for OS CD or the folder where OS installation files are stored. When the folder / CD Drive is selected, it will create the bootloader in USB drive and copy the OS installation files (In my case, I tried Windows XP). Thats it! Your USB flash drive is ready.
Phase 2 - Booting and Installing OS using the USB flash drive
4. Plug-in the USB flash drive into the target netbook, laptop or desktop's  USB port (this is the computer you wish to boot with USB flash drive and install OS)
5. Make sure the computer supports booting through USB and you have changed the BIOS settings such that the boot sequence order is set to USB Floppy or USB disk first.
6. Restart / Switch on the target computer.
7. As per BIOS settings, the BIOS will try to locate the presence of a USB disk, floppy drive. When it finds the boot loader in the USB drive, it will start booting from USB drive. Once booted, an option screen will be displayed.
8. Select "Text GUI setup" option (usually #1 in the list) to install XP or the OS from scratch.
9. Untill the first set of files are copied, the process is very slow because the USB ports in 99% of hardware works in only in USB 1.1 mode. It may take nearly 20-40 minutes  to see the welcome screen of Windows XP Graphic installation. From there it goes in rocket-speed and things get installed in less than 12 minutes. :-)
10. Thats it!

Hope this quick and dirty guide gives you a good idea. Booting and installing OS using USB Flash drives comes in handy when you have a failed CD Drive or to replace Linux OS with XP / Vista in Netbooks.