Thursday 28 February 2013

Children driven education & the Granny Cloud




I've been a profound admirer of Sir Ken Robinson, who emphasizes on how schools don't really tap the way children learn, not to mention what they want to learn. He rightly questions the purpose and methods of education school education. Educators need to cater to children's creativity and curiosity. Dr. Sugata Mitra quotes Sir Arthur C. Clarke, "When children show interest, education happens." Dr. Mitra successfully uses technology to his advantage in his pursuit, and proves Sir Clarke's point.
Also, children nowadays are exposed to the idea of competition. Instead, Dr. Mitra's experiment clearly indicates that children learn together, as a team. This inculcates social skills in the children, teaches them teamwork!
Congrulations to Dr. Sugata Mitra for the first $1M TED Prize, and good luck continuing the Hole in the Wall project.

Wednesday 15 February 2012

Designing the Month Selector


We have been using date range selectors to get reports on the InMobi Interface. Recently, I was asked to design a month selector, so that users can get the transaction history across a few months.


I started off exploring some interaction patterns for selecting a range of months. I first looked at some internet banking applications that I have been using. They just have drop-downs to select the FROM and TO months. Or they give only monthly statements. If you need statements for a range more than one month (ah, they're so difficult to figure out!), there are date selectors, and not month selectors.


Here are the designs that I explored. 
Note: Pardon the bad experience caused by the funny alignment and sizing of images in blogger.


Drop-Downs
Having two sets of drop-downs for the Month & Year, for the FROM & TO months respectively. It may be alright to select just one month of some year (such as your birth-month). But it's obviously a very inefficient way of selecting a month range (8 clicks and lots of scrolling).


Some portals commit the sin of having the years in ascending order in the drop-down, especially for the birth year. Scrolling down from 1900 or 1950 - causes HATRED in users.


We can optimize this a little by merging the month and the year. Though this will take two separate sessions of scrolling. And it will be worst, if it's a small gap of months, that occurred long time ago.



I tried to optimize the design further by getting straight into the context. 
  • The design was for records spanning not longer than 4-7 years. So in the above solutions, the user may not have to scroll at lot.  
  • Disabling months that are not relevant.
    • If a user has registered for the application in June 2009, then the months before June 2009 should be disabled.
    • It's February 2012, so the months thereafter should be disabled.
    • The years before 2009 and after 2012 will not be visible at all, since there are no selectable months in them.
  • We should set the default selection to: 
    • FROM: 6 months ago
    • TO: Current Month
  • Also, the design should be agnostic to the order of the months. If the FROM month is after TO month, then on click of 'Apply', the values should be instantly swapped. 
Double Scroll 
Taking some inspiration from the pattern for drop-downs in the Apple iPhone, I came up with the following designs for the web platform.
What we do here, is just have two scrollable components in the same drop-down.




In the design below, we can have a fixed selection pane, and the month & year scrolls in the background can be moved to make the required selection.




The month selection can be viewed near the 'Apply' button. We can also have the 'Cancel' button preceding the 'Apply' button, the way Apple does it. 


Selection Range
The user can drag the pins FROM (1) & TO (2), to the months they want to generate the reports for. 


As you drag the pins over the points, the month and year should be displayed below it to notify the selection. In this case, default selection can be complete life of the account. 
Well, the user effort required in such a drag-and-drop of the pins to the required month (twice!) acts as the disadvantage of this design.
Anyway, more optimization is also possible - such as demarcating January of every year.


Meters
Meters can be visual panels controlled by the UP  & DOWN  arrows.
The component can also be controlled by the keyboard. 



The contents text boxes can also be changed using the keyboard. But incorrect values should not be allowed to be entered.



Select the Month, then Year.
Here, I'm exploring a design where the selection of the month precedes the selection of the year. Well, that's how we language dictates it - the name of the month, followed by the year. 





This would be a bit like the Google Analytics date selector. The FROM field being the default selection. On clicking of the month, the year can be selected (then the year panel closes).
Immediately, the TO field will become active and the months will appear like links again.


Select the Year, then Month.
In this pattern, we show two selection panels, for FROM & TO. The valid years are displayed first. On selection of the year, the valid months are displayed for selection.





In the following pattern, I'm exploring vertical alignment for the years and months.




And finally...
So the design that I suggested was the following. I merged the years together. Users can use arrows to go back and forth with the years.
Again, the invalid months can't be selected, and the invalid years can't be viewed (no prev/next arrows accordingly).
Default selection is: 6 months ago to current month. 






I shouldn't forget to mention this incident. We had a little confusion about which month is exactly 6 months ago - how do we include the current month and the corresponding month 6 months ago? And to resolve the confusion, our Product Manager Sriyansa Dash made a great quote - our user would always prefer more data than less :)  



Saturday 3 September 2011

Ken Robinson says schools kill creativity


Again, a wonderful TED video. Here, Sir Ken Robinson, in a very interesting talk, decorated with some hilarious quips, describes how schools kill creativity.


Hopefully some day I'll be able to translate P.L.Deshpande's 'Bigri te Matric', because I could totally relate to his words, when I listened to them, and when I watched Sir Ken's video.
Also, have got similar insights from Mr. Jinan Kodapully when I was at NID. 

Always heard a lot about Sir Ken, and have enjoyed his RSA Animation video. But the one in this post is simply marvelous. Thanks to Ishan Bhalla for mentioning this on his blog.

Would love to hear any thoughts on education or design education, do comment.
 

Friday 11 February 2011

Erik Spiekermann on typography, design, and more.

Erik Spiekermann - Putting Back the Face into Typeface from Gestalten on Vimeo.

Erik Spiekermann on observing, getting inspired, and designing, of course. Spiekermann gives us a whole lot of great design advice, through his love - Typography.

Something more than just a must-watch video. Get influenced! Get inspired!

Tuesday 28 September 2010

Friday 18 June 2010