Cluster Cards - not in Top 10, would like to get your feedback

[niravmehta]

We built Cluster Cards - insightful, action oriented card deck for problem solving - for the Sencha Touch App contest. Our app did not make it to the Top 10. It's not a great example of Sencha Touch's capabilities or HTML5. Nevertheless, I feel it has the potential to help many people.

We built the first version as a tool for conference participants (image all people going to Sencha Conference) to get maximum value of their participation. We have only created seven cards right now, but will add more soon. We were inspired by Get Mental Notes and believe such cards are a great way to solve problems.

I would like to get your feedback on the app and the idea!

Checkout the app at: http://www.clustercards.com/app/

Also attaching a few screenshots for ready reference.

:Nirav

[gcallaghan]

It took me some time to realize what to do after viewing the first card. It wasn't immediately obvious to me that there was more than one card, or to navigate the cards I should swipe the active card. Maybe emphasize the carousel "dots" more to give the user feedback that this is one page of many.

[niravmehta]

Thanks for the feedback. We wanted to support unlimited cards, hence used an infinite carousel. The limitation with this is that we can't show those indicator dots..

I also felt users may be lost on the first card.. Will think up a solution.

Did you like it otherwise?

[gcallaghan]

I do. I use supermemo for similar concepts. But the idea is nice of getting the most out of attending a conference. I could see stronger "Call to Action" ui elements being helpful. To me the default notes button gets lost within the menu.

In terms of infinite carousel, perhaps you might need just a dynamic carousel? You might be able to have a url with a json object of all the cards to be inserted into the carousel, add the cards dynamically to the carousel and recalculate the layout to insert the "dots" ui element.

Just a back of the envelope suggestion. You might try something like...

// this could be got from an ajax request to some url serving a json object with mime-type "application/json"
var cards = [
            {
                    html: '<p>Carousels can be vertical and given a ui of "light" or "dark".</p>',
                    cls : 'card card1'
                },
                {
                    html: 'Card #2',
                    cls : 'card card2'
                },
                {
                    html: 'Card #3',
                    cls : 'card card3'
                },
                 ...
               {
                    html: 'Card N,
                    cls : 'card cardN'
                },
            ]

Ext.each( cards, function(item,index,allItems){
      var card = Ext.ComponentMgr.create(item);
      allItems[index] = card;
}) 

Carousel.add(cards);
Carousel.doComponentLayout();

Something along those lines can make it dynamic yet finite at the same time.