Requirement Gathering: DPLC – Web UI Design & Development

Stage – 1: Requirement Gathering:

The requirement gathering is the critical phase to extract the project information from the client in a systematic way. A requirement gathering for design is entirely different than for requirement gathering for development. Here the discussion will be mainly based on four important dimensions i.e. Objective, Content, Design & Usability. Whereas in development it is Technology, Database, and Business Orientation.

Objective
Objective defines the business objective of a solution developed. A designer must know why the design is being made for. The project could be Air Travel Site, Real Estate Directory, Vacation Portal, Education Portal, Database Management Application, Stock Market Information Tool, or just a company website. A clear objective helps designer to visualize the future design & progress plan of the project.

Content
Content defines the potential or nature of any project. It might be a tourism information site, education portal, online stock broking portal, gaming portal, database management application etc;. Content is what drives the design process to the next level. And it is the scarcity in most project because a client comes with a business concept, but not content.

Content are classified into many types such as business inputs, complete project information, viewable contents like, logo, text, images, input fields and other multimedia objects. A designer’s job to integrate these contents into one aesthetically looking application.

With few very simple words we can define content as source, foundation, skeleton or wireframe structure for any design project.

Design:
Design is the next process derived after collecting enough resources like contents. Design is entirely a creative process. A designer before initiating design work should know the following:

• Type of project
• Organization type
• Target audiences
• Specific design guidelines/specifications from the client
• Technology

Usability:
Usability is defined as simplicity to experience an application. Usability is combination of physical and psychological consideration. Usability mainly consists of readability, accessibility & findability. Following features are very important to define usability for a site:

• Content priority
• Media type (static/animated)
• Device Type (PC/PDA)
• Key input operation (Mouse/Keyboard/Touchscreen/Hybrid)

Introduction: DPLC – Web UI Design & Development

DPLC – Web UI Design & Development

DPLC stands for Design Process Life Cycle. This is similar to SDLC(Software Development Life Cycle). DPLC will be a part SDLC when any software project developed using User Interface considerations. Another way to define DPLC is through sequential process of implementation of User Experience Design alongwith application of Information Architecture principles using Waterfall model of SDLC for Web Application UI Design.

Following are the sequential steps included in DPLC-Web UI Design & Development:

1. Requirement gathering
2. Visualization
3. Roadmap / Flowchart / Wireframe / Sitemap creation
4. Information Architecture & Design
5. Graphic Design / Visual Design
6. Design Refinement
7. Prototyping
8. General considerations in prototyping & it’s standards
9. Prototyping for .NET applications
10. Prototyping for Java applications
11. Prototyping for PHP applications
12. Prototype Testing – Usability
13. Prototype Testing – Browser Compatibility
14. Prototype Testing – End-User Experience
15. Validation / accreditation
16. Release for development

The step 1 to 6 are considered common for all User Experience Design processes whereas 6 to 16 are domain specific like Desktop & Web Application and also technology specific like VC++, PHP, Java, .NET, .NET-Expression Blend, Flash, Delphi etc;

With DPLC method it is assured that the User Experience Design process is carried out in a proper way. Adopting this will allow any creative team to design & develop effective design solutions in proper time, suitable budget, bug free & with little iterations.

In coming articles we will discussing each of the topics mentioned above in detail with suitable live examples.

Feature Fight: Vista vs. Tiger

Feature Fight: Vista vs. Tiger

Microsoft Windows Vista

• Codename: Longhorn
• Released: January 30,2007
• GUI: Aero-Glass

Apple Mac OS X 10.4 Tiger

• Codename: Not known
• Released: April 29, 2005
• GUI: Aqua

Now we are going to discuss the GUI relativity of Vista over Apple Mac OS X Tiger. Even we are going to discuss the relativity on features of Mac OS X Leopard over Vista.

This became even more controversial when the Microsoft Windows Vista released developer Beta for testing on completion of development in November 10, 2006. Most of the developers criticized it for its relativity in GUI with Tiger. Even now we are going to do the same thing through feature by feature and point by point.

Aero-Glass Theme:
The A.E.R.O. stands for Authentic, Energetic, Reflective and Open. The theme which comprises of entirely new look and feel out of its predecessors like windows 95/98/2000/XP. Here are the similarities compared with Tiger:

• Transparency/Translucency/Opacity:
  Aero-Glass has the transparency appeal to it and applied to its window pane, Start Menu, Menu and Desktop Icons. Similar to translucent theme on Tiger.
• Live Shadow:
  All the window and menu elements does have a Flat Shadow around them, but more sleek and intuitive than Tiger.
• Icons:
  All the icons created are either 3D or 2D multicolored with shadow. One can easily notice the Recycle Bin of Vista has 90% relation with Trash of Tiger.

Features:
Other than GUI there are highly noticeable features that has been used in Vista compared to Tiger.

• Fast Search:
  This seems to be the replica of Spotlight in Tiger, where the file search has been improved drastically. Give the search keyword/phrase within a blink of an eye search completed with results. One can easily spot the Search(magnifier) button icon in Vista where it is placed towards the right of text input box, whereas in Tiger the same icon already placed on the left of text input box.
• Desktop Widget:
  This one I found not only similar to Dashboard of Tiger, but even with Yahoo Widgets by Yahoo Inc. Where one can see a analog clock, Weather, Stock Details, Maps, and lot more to be mounted on the desktop.

Hope this is evident enough to prove that Microsoft have done some copycatting in its new product “Vista” , now we can even call this as rival copycatting.

Now, its time to drag the Apple to courtroom. Where Apple releasing Mac OS 10.5 Leopard, few features found similar with Windows Vista.

Features:
These are noticeable features that are found in Leopard compared to Vista.

• Time Machine:
  These features found specifically in Windows XP as System Restore and even same have been improved in Vista. The Time Machine seemed to be more advanced compared to System Restore. System Restore can only restore the system files such a DLLs, INIs and few EXEs, whereas in Time Machine it can even restore user created files such as photos, movies, and other documents including system settings.
• Spaces:
  This is similar and again advanced to multiple Users feature of Windows XP & Vista.

Hope we’ve covered enough criticism against both the parties. Looking for your feedback on the quality of article. If you think any modifications needed into the article, we whole heartedly welcome your suggestions.

For Reader’s reference:
Apple Mac OS X Tiger: www.apple.com/macosx/tiger
Apple Mac OS X Leopard: www.apple.com/macosx/leopard
Microsoft Windows Vista: www.microsoft.com/vista