Requirement gathering with an UI framework

ba

A “traditional” requirement gathering process typically involves gruesome activities such as process owner interviews, wish list walkthroughs, documentation of each requirement in extended form, data flow design, in-depth business rules, identification of various types of fields, validations and integrations and much more.

Enormous amount of time is spent to document these activities, but still multiple questions by developer flows and process owners do miss out on critical elements? Predominantly, this is because of huge gap between textual understanding of the requirement and visual thinking.

To bridge these gaps frameworks rescues you from such textual syndrome, Twitter bootstrap, Foundation, Groundwork, Gumby, HTML5 Kick-start, Boilerplate and few others give a rock solid foundation and support to your visual thinking machine. Business analysts are in an era where prototype designing is now a child’s play why not exploit it?

With the advent of these tools in no time we can create an ideal prototype that serves visual purpose of your clients towards user requirements, data flow, fields required, placement and types of components , validations, business rules and integrations required.

Perspectives:

Process owner – Visually senses the output of requirement instead of browsing tons of documents. The process owner does not have to wait till end to view the output demanded. Only to find during UAT stage the hits and misses including logical errors.

Business analyst – Frameworks assists analysts to draw the real requirement that is visually expressed and demonstrated to the process owner, client and developer.

Developers – Developers are apprised in advance of the effort required to build the application. They worry less about design and more about implementation of business logic. In addition, the frameworks are complied to work on multiple browsers, these frameworks not only makes developers life easy but also comes with a great online forum support in-case a help is needed.

These frameworks are free to use and in some cases inexpensive but packs and punches great features that may gather client’s requirements in a record time. Never before a business analyst is armored with this kind of environment that promises speedy requirement analysis and if you wish to further take the framework on steroids then development frameworks such as Ruby on rails and Python on Django is your answer. Not only your prototype is ready but when plugged  with a development frameworks your requirement and application sprints.

Need updates on my future posts. Follow me

The fall of age old navigation bar

The trend has begun, as I presume, I see more and more web applications where I do not see the age old navigation bar. Or is it that navigation bar has found its new avatar.

Look out for trychec.com navbar design. The product uses button pills in the navigation area than multiple links, that gives the webpage an unique and modern style.

chec

The navigation bar must be clean and clutter free. Look at this one, a work in progress web app at 16columns.com makers of 34pass.com. This is an internal link to create a new project instance. Again a simple nav bar that only does what it is supposed to do. Just three links, one search bar and a settings icon.

365audit

Few tips to keep navigation bar simple:

Social bookmarks : Social bookmarks can find its place in the footer instead to keep its place in the navigation bar.

Keep it simple: Use precise and easy to understand words on the navigation bar. Leave out unnecessary words that don’t add anything to the navigation item. For instance instead of “In the News,” consider simply “News.”

When choosing a navigation bar, start simple. Evaluate your content thoroughly and ask yourself what your users need to access quickly. More often than not, a complex navigation system is an indicator to better content planning and organization.

Go for a clutter free navigation bar in this “Less is more” world.

Where else did you see where the navigation bar has found its new avatar?

Web application from scratch – List of tools

What does it take to create a web app from scratch? with little research and heIp from 16columns.com, I derived following list of tools:

Tools at design stage

  1. Paper sketch – Nothing works best than to pull out a pen and Scribble, draw lines, jot notes, create wireframes. Liberate yourself.
  2. Mind map – My personal favourite, a small but serious powerful tool to put all your ideas good,bad and ugly at one place. “Coggle it” is the only cloud based best mindmap tool available there..
  3. Balsamiq- Sketch ideas with a mock up tool. These tools cost less than $10 per month. Other tools include mockflow, uxpin to name a few.

Now that your design is ready prototype makes it way.

Prototype tools

Best tool is to open code editor (npp is free and best) and just code. At this stage a framework like bootstrap or foundation can be handy.

This preferably must be a near replica of the application you wish. It also helps to translate requirement to developer and promotes fixed price culture if development is outsourced.

If you self develop, functionality is what you should crave for instead of design. Design goals can be met later.

After prototype your developer pitches in and begins to write that beautiful code for your application, to equip him, below mentioned tools can make a dent in universe.

Tools at development stage

  1. Ruby on rails – In today’s fast paced development world ROR is the buzzword, many applications are built on these solid frameworks, to name a few basecamp, groupon, 34pass.com , Twitter and many more. Python on Django is another great framework to get that app live quickly.
  2. Aptana studio to write your code. Notepad ++ is another great tool to write your code. Jetbrains Pycharm for Python/Django. Other include Netbeans, eclipse and so on.
  3. Email and Domain Host – Namecheap is one of the best web hosting company out there, there are many other too, but namecheap is seriously cheap and the interface enables you to go in a self service mode due to its stellar admin module. What I like best is the live support which is instant and powerful
  4. Code host and revision control – Though github is the buzzword, I personally recommend bitbucket. As on today, with bitbucket you get 5 git or mercurial private repository free. Also the interface and features are awesome.
  5. Application host – Heroku is best to host both Rails as well as django app besides node.js, java and other frameworks. Heroku comes with great add-ons that remove the stress out of server management, monitor apps, email deliveries and much more.
  6. Chec – To manage your payment integrations with your app. For customized solution you must look for other providers.

To manage Design and Development

  1. Trello for project management – Use this tool and you will know why. Trello eases out your worries to manage project. For web application development I recommend to make following lists Activities, New ideas, Working, Completed and Known bugs. Trello manages your activities, resources and schedules along with file management.
  2. Droplr – Simple and effective file sharing tool, especially during design stage when the pages go under multiple revision. Trello too can be used as a replacement of droplr.
  3. Needless to mention Skype and gtalk
  4. Elance if you wish to hire designers and developers.

I hope this compiled list is as useful as it was to me. Would still like to know if there are any better tools than one mentioned above. Happy web application development