Online Shopper Order Tracking User Interface Concept
Some type of sub-title
Some type of sub-title
UPDATE : Photoshop conversion now complete :). You can find it here - LINK
INTRODUCTION
This is a wireframe of an order tracking user interface concept. Developed completely in Adobe Fireworks CS5 and it serves more as a visual prototype rather than an interaction prototype.
The aim of developing this prototype was to help me understand the complexities and different techniques used to structure large pieces of information as well as some design principles such as balance, typography, repitition etc. It is not the most refined but as someone who considers himself a rookie, I am pretty pleased with what I have been able to come up with and it is my hope that the comments, appreciations and criticisms that I will get from doing this project will spur me on to my ultimate goal of being a master craftsman in designing and developing web and mobile applications, sites and whatever new thing the web world will throw at me
The Concept
As mentioned, this is an order tracking interface. It is a medium fidelity wireframe that visualizes order tracking data in two forms. Its targeted platform for the interface that will be modeled from this wireframe is the desktop web where a mouse and keyboard use is common altohugh further iterations to it can make it viable for mobile touchscreen devices such as the Apple iPad. Data representation is discussed below:
The first form of data representation is the map visualization which represents data of orders being tracked by the application(system). it contain various elements and controls that help the user in understanding the data that is presented on the map. The pins on the map relate to the order information shown on the order tracking tab below the map. As depicted in the screenshots below, it is envisioned that the user will be able to zoom in and out of the map for better clarity, use direction tools to 'navigate' through the map, gain more information on a particular order by clicking on a map pin and generally, the map will give the user a sense of where exactly a package(order) is in relation to its intended destination. With the expand map control, the user can make the map fill a wider area (which will make the tabular data disappear) while still being able a lot of data on what is going on with the order tracking(delivery)
The second form of data representation is the tabular data which represents order tracking infromation in a series of rows and columns. As you can see, controls used to manipulate the data in the order tracking tab are almost similar in their objectives as the controls located on the map (i.e. search, order descriptions and filtering of order based on Estimated Time of Arrival (ETA) ).
Where Next?
The wireframe now moves to design conversion in order to make the user interface concept look more realistic with design elements/principles such as color, depth, texture. Once I finish it, I will be sure to post it here.
