Product Management—User Interface Design of a web product

Green HoneycreeperUser Interface is the visual part of your product; this is where all your back-end gets exposed. This is where your users interact with your application tier, middle-tier, database-tier, third-party & whatever-tier. The user interface could be visual, wherein for web products you have HTML pages interacting, for desktop-based products it’s your screen (or window) where the user interacts by clicking links, submitting forms, scrolling windows, or even closing the application.

The user interface design consists of four parts and is normally done in this order of development process:

  1. Information Architecture This is the sitemap & structure of your website. For example, when you visit http://bing.com what options do you have for interacting with the site, some include (a) Typing a search query & submitting the form (b) Clicking on maps link (c) Clicking of the about us link etc.  These three options represent navigation pattern, the conceptual layout & the flow (form submissions showing a result page) of the pages. However, The Information Architecture does not depict logic of page flows, but just linkage of pages. Here is a simplified Information Architecture of bing’s home page. Bing.com Information Architecture Example
  2. Interaction Design This is the flow chart of your website which captures a lot of details which shows how the pages could interact with each other and under what conditions. For example, a home to login linkage on the Information Arechitecture would show a linkage from the login page to the my dashboard whereas the interaction design would capture how the user can or may not be allowed to navigate from the former page to the latter. A login interaction has logic to check for user name & password validity, account expired/active status, session timeout, etc. The interaction design builds upon the elements of Information Architecture (the “login” & “my dashboard” page) and applies logic to connect them together. Here is a simple interaction depicting which “index” to be picked up for the given search query.Bing.com visual interaction example
  3. Wireframes A Wireframe provides the guide to the layout of the page, where the buttons go, where the form is, image, nav bar, etc. It is also developed by the product manager. Here is an example wireframe of bing’s homepage:Bing.com Homepage Wireframe
  4. Visual Design The visual designer (aka the “photoshop” expert) converts a wire frame into a mockup. Different screens could have different wire frames hence different mockups. The designer may do HTML/CSS/JS mockups from the wireframes without going the photoshop route. The visual design goes into the details of every pixel which may be manipulated on the screen. Here’s the visual design output of bing (which you may have seen already)Bing.com Final mockup

Who does what? What are the roles & responsibilities?

1. Product Manager Overall responsibility. Creates the Information architecture. May take help of software/system architects for existing components and their behaviors. May engage web designer for existing sitemap & functionality. For startups, the Product Manager role may be assumed by the CEO, CTO or an architect on board.

2. Visual Designer Does final mockups based on wireframes and IA. May also do the final HTML/CSS.

3. Web Developer Converts the HTML/CSS using Javascript to product a working user-interaction.

The user-interface once connected to the back-end becomes complete & is revisited for usability testing, customer feedback, focus groups, scenarios etc. More about them in a future post.

(The bird is a Green Honeycreeper found in Mexico & Brazil. Pic courtesy Dario Sanches)

Tags: , , ,

  • Superb article – must RT – this is like a must read or every startup ‘bandhu’

    • Absolutely. Doing things in sequence although executing in parallel (oxymoron? ain’t it?) brings clarity on what needs to be done instead of everybody running with their pants on fire!

  • Superb article – must RT – this is like a must read or every startup ‘bandhu’

    • Absolutely. Doing things in sequence although executing in parallel (oxymoron? ain’t it?) brings clarity on what needs to be done instead of everybody running with their pants on fire!

  • Sateesh

    Having just gone through building of a brand new product, and doing all of these above, I wouls say that a key thing you must do is to iterate, iterate and iterate. If you focus on getting each step perfect before proceeding to next step, the project never gets completed. Instead, do just enough to get to the next stage, iterate through it, and revisit some of the decisions.

    It also helps to clearly define the key themes of the product – what do you want the product to convey to the user.

    On Visual design, its important to get feedback from all the key stakeholders, but the Product Manager along with Marketing should make the final call and if necessary, say no to strong options. Visual Design always invokes strong opinions and feelings, but if you implement every suggestion, you may find the design becomes a mess. Instead focus strongly on the product themes and evaluate each and every artifact of the process against them.

    • Agree with it, Sateesh.

      Iteration and constant feedback is the key, every step, shud be closely watched by the stake holders, with the product manager being the proxy/voice of the customer.

      Visual design does arouse emotions & I think you collect feedback from everybody but take a call as a product manager. No design is right until the customer kills it.

  • Sateesh

    Having just gone through building of a brand new product, and doing all of these above, I wouls say that a key thing you must do is to iterate, iterate and iterate. If you focus on getting each step perfect before proceeding to next step, the project never gets completed. Instead, do just enough to get to the next stage, iterate through it, and revisit some of the decisions.

    It also helps to clearly define the key themes of the product – what do you want the product to convey to the user.

    On Visual design, its important to get feedback from all the key stakeholders, but the Product Manager along with Marketing should make the final call and if necessary, say no to strong options. Visual Design always invokes strong opinions and feelings, but if you implement every suggestion, you may find the design becomes a mess. Instead focus strongly on the product themes and evaluate each and every artifact of the process against them.

    • Agree with it, Sateesh.

      Iteration and constant feedback is the key, every step, shud be closely watched by the stake holders, with the product manager being the proxy/voice of the customer.

      Visual design does arouse emotions & I think you collect feedback from everybody but take a call as a product manager. No design is right until the customer kills it.

  • hai admin this is very nice information for me..i didnt read this before…now i got some idea about this…thanks for sharing…please visit my blog in that i too have some useful informations..
    http://netwalker.limewebs.com/
    Its for E-Learning blog who want to really develop their Knowledge.And you can earn online money..Visit my blog…

  • wew.. such an invormative information. thanks for sharing!

  • Thanks for pulling this together and sharing!

    Term papers

  • didi

    Thanks for the tip  its always great to see tips that are actually useful and described in context. You can see some health resources tanning beds which will help you improve your view.

  • Thanks a lot ,very nice article. I'm working as a web designer and it's usually difficult to make start up for new countries so such example as Baidu usually helps to improve usability.

  • Pingback: Смешарики,гбка боб,маша и медведь,лунтик,ну погоди,три богатыря()

  • Pingback: dXgHpBHH()

  • Pingback: tSIeZejR()

  • Pingback: WpTmfmBt()