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

Connect to enhance user experience

Often we don’t allow an user to expostulate our design. That extra field does makes them feel bloated but sometimes designer does not pay any heed. Is it lack of some magical connect with user? Surprisingly the answer is yes.

In order to understand user and have a remote connect one must conduct many application tests, have casual chat with users and developers to understand user troubles and issues with the designs.

Recently, I interviewed Sa Trung, designer behind 34pass.com. When I tested the application I felt that app was too laconic (which is a great sign) and I wanted to know why, and here is the response of Trung.

“In 8 out of 10 times users are convinced with design changes I make. Somehow within I feel that user would be happy to use my design and when I introduce those extra fields I feel the pain first even before I ask the user

34pass.com just has required fields no more no less right from the sign up page to logout”

Trung has a great connect with his users and he often test 2 or 3 new applications a day and this trait of his user connect is now embedded within him, it is part of him.

Have that connect with user, try and test multiple apps, communicate with users often and embed this wonderful trait to better your designs and user experience.

A strange email, Ux impact

Recently, I booked a hotel ticket to celebrate dad’s 56th birthday through makemytrip as a gift to my parents. Thankfully registration was optional. I selected a hotel and the room and paid applicable charges and a voucher was sent to my email Id.

All seemed good until I received a strange email along with the voucher in my registered inbox

An email from makemytrip that contained my email I’d and a password. I couldn’t resist to ask myself, Is this a forced customer acquisition?. My imagination went to a spin and here are my stupid thoughts:

Is this legal?
can a disgruntled employee of makemytrip misuse my account?
Why not take a permission before account creation.
Is this spam, cause I just expected a hotel voucher?
Can this be a hack attempt to retrieve the credit card details when I log using the password sent?
Can I write about this on my blog (btw I just did that)?

With a hope that email is genuine I bravely logged in and was able to browse my account

Wait a second, here is another catch. Makemytrip did not forced me to change my password when I first logged in. That’s scary right?

Now does this entire process improves user experience, irritate a customer or maybe compromise potential security aspects.

I leave this question to the audience.

Manage product not a function

In today’s corporate environment company comprises of various function/departments. Often innovation and product excellence is  lost when company concentrates on multiple activities such as employe management, product performance and profitability, meet various statutory requirement, maintain various applications and so on.

Top management has a box full of issues, concerns, glitches which have to be dealt with. How could one manage this humungous task of organization management

A different perspective:

Create products as a business unit, make products and service as a profit as well as a cost center instead of an entire function.

Take for examples products such as Mailing, Hosting, Cloud, Security services etc. What if we make each product as center of excellence.

Lets look at how this type of management drill down, case in here “Mailing Product”.

Cost involved to sell each product – R&D (Innovation), People (Salaries), Operations (help-desk costs, Administration costs, Technology , Facility cost, Travel, Infrastructure) etc.

Profit – Revenue-Cost

A dedicated support function (Compliance, Sales, Procurement, Support etc) can be setup to these individual product (Dedicates resources for Mailing, Hosting, Back up etc). Hence mail service is not just a product in X company it is their individual value stream, a revenue center and a center of product excellence where the objective is to create more innovative products.

Each product have similar center of product excellence teams that strive to be on top. Even the measurements against these particular product becomes manageable.

Typical measurement lists for a product:

1. Number of support calls logged

2. Revenue per head count

3. Number of complaints

4. Delivery within time.

5. Revenues, Profits and so on…

This is a decentralized way to run a company but one may try to see if such management style reap any benefit.

I credit Jack Welch who forced me to think products as individual center of excellence (reference: Straight from the gut)

Wait, now automate

Did your organization deployed rapid automation recently?

If yes,

  1. Did your organization contemplated seriously on impacts of the new automation on internal systems, external systems, suppliers and customers?
  2. Does the new automated system eliminate 7 kinds of waste?
  3. Does the new automated system add value to customer?

If your answer to point 1, 2 or 3 is negative then probably you rushed to automate rapidly that may produce an undesirable outcome to organization’s good intention to automate.

Toyota takes really long time to accommodate any kind of IT solution into their system. Principle 8 of Toyota Production system states to use only reliable, thoroughly tested technology that serves your people and process across boundaries.

At Toyota new technology is introduced only after it is proven out through direct experimentation with involvement of a broad cross-section of people. Toyota will go to great lengths to analyze the impact it may have on existing processes. (The Toyota Way – Jeffrey K . Liker)

Nowadays, majority of IT solutions are implemented with direct proposed solution without any defined metrics, cost-benefit analysis, impact on customers/systems/suppliers, impact on cross functional department, value addition and so on.

Points to remember before we automate:

1.      Establish manual process with the help of Lean, Six Sigma, TOC or any other proven improvement methodologies.

2.      See if the new automated system will add value to existing process, customers, suppliers and other stakeholders and remove waste from the process.

3.     Analyze the impact of new system that affects processes, customers, suppliers, systems and stakeholders

4.     Perform cost-benefit, impact and risk analysis.

These are just few tips but the organization must go to greater lengths and spend a great amount of time to decide implementation of new systems.

Decision making at Toyota imply strenuous planning for 10 months and then implementation in installments such as with pilot production and be fully implemented at the end of the year with virtually no remaining problems – Alex warren.

Let’s not rush to develop or buy the newest technology or application before you thoroughly test it and prove that this new technology will cater to all respected needs.