[{"data":1,"prerenderedAt":266},["ShallowReactive",2],{"project-4714548":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":27,"sentiment":28,"stance_mix":29,"scored_comments":33,"aspects":34,"strip":42,"post_text":43,"what":44,"said":75,"maker_in_thread":163,"shape":174,"grid":177,"attempts":230,"same_week":231,"maker_shows":30,"maker_hidden":258,"reader_version":259,"card":260},"4714548","Crumble","Fun, simple feature tours for your website or app","title","Show HN: Fun, simple feature tours for your website or app","http:\u002F\u002Ftommoor.github.com\u002Fcrumble","tommoor.github.com","tommoor",1351545981,2012,64,25,363,1677,22,"notable","dev_tools","jquery plugin","library",[21,24,25,26],"feature tour","user onboarding","tooltips","debated",0.026,{"positive":30,"neutral":31,"mixed":32,"critical":30},5,1,2,13,{"performance":35,"idea":37,"design":39,"execution":40,"pricing":41},{"positive":36,"critical":31},0,{"positive":38,"critical":32},3,{"positive":36,"critical":32},{"positive":31,"critical":36},{"positive":31,"critical":36},[31,36,31,36,31,36,38,36,30,36,31,30,38,36,30,38,36,36,36,36,36,30,30,31,36],null,{"problem":45,"audience":52,"pricing":43,"motivation":43,"time_to_build":43,"stack":61,"openness":73,"stage":74,"team_size":74},{"value":46,"source":47,"evidence":48},"Creating guided feature tours to introduce new users or features","maker",[49],{"id":50,"by":11,"text":51},"4714566","Crumble is a jquery plugin that makes it easy to create tours to introduce new users or new features. It is built on top of grumble.js by James Cryer to generate the bubbles…",{"value":53,"source":54,"evidence":55},"Website and app developers","inferred",[56,57],{"id":50,"by":11,"text":51},{"id":58,"by":59,"text":60},"4714802","lukevdp","Look's great. I'm going to give it a try to guide first time users of my app.",[62,66],{"value":63,"source":47,"evidence":64},"jQuery",[65],{"id":50,"by":11,"text":51},{"value":67,"source":47,"evidence":68},"grumble.js",[69,70],{"id":50,"by":11,"text":51},{"id":71,"by":11,"text":72},"4714985","Hey, using images allows compatibility back to IE6. You can read up on the original grumble post here which crumble depends on: http:\u002F\u002Fjamescryer.github.com\u002Fgrumble.js\u002F","open_source","unknown",{"praise":76,"objections":97,"requests":126,"questions":134,"alternatives":147},[77,89],{"value":78,"source":79,"evidence":80},"Simple and open source","commenter",[81,85],{"id":82,"by":83,"text":84},"4715419","mck-","And Crumble is open-source! Which is awesome! Great job, I was looking for something exactly like this - simple. Will try tomorrow",{"id":86,"by":87,"text":88},"4715075","highace","This is good. I remember seeing a couple of other walk-through plug-ins recently on HN, except they both wanted a monthly subscription. Unless they're also offering (and you…",{"value":90,"source":79,"evidence":91},"Useful for guiding first-time users",[92,93],{"id":58,"by":59,"text":60},{"id":94,"by":95,"text":96},"4714847","MattGrommes","This is exactly what I've been considering using on http:\u002F\u002Fdebugmap.com It's a site that needs a little explaining but I hadn't been able to come up with something usable myself.…",[98,108,115],{"value":99,"source":79,"evidence":100},"Tours may not educate users; a commenter's tutorial saw poor retention and more support requests",[101,105],{"id":102,"by":103,"text":104},"4715164","the_bear","I used to use a system like this for my software, and unfortunately I found that it did a terrible job of educating users. People would work through the entire tutorial (~5…",{"id":106,"by":103,"text":107},"4715468","The guide itself was definitely being read. I built it directly into the app, so users could only advance the guide by completing the step described (like, they'd have to…",{"value":109,"source":79,"evidence":110},"Bubble dismissal is unclear, no close button",[111],{"id":112,"by":113,"text":114},"4714804","nuclear_eclipse","I think it would help to have a more obvious method for dismissing the bubble, like an X button, or a button that explicitly says OK on it, to give a better visual clue for users…",{"value":116,"source":79,"evidence":117},"Bubble is an image, hard to style",[118,122],{"id":119,"by":120,"text":121},"4714977","sunsu","This is great and I'll probably use it! However, I think I might fork because I don't like that the bubble is an image. If it were just css it would be much easier to style. Is…",{"id":123,"by":124,"text":125},"4714925","mnicole","Initial thoughts: 1. A circle is not a very effective content area at this size, particularly for instructions or steps. 2. Why an image instead of CSS?",[127],{"value":128,"source":79,"evidence":129},"Dismiss bubbles when clicking page elements",[130],{"id":131,"by":132,"text":133},"4715116","jem_nz","Nicely done. One thing: I think you need to be careful it doesn't get frustrating for users - perhaps have the messages dismiss when you click on website elements, and try to…",[135,142],{"value":136,"source":79,"evidence":137},"How to detect a user's first visit",[138],{"id":139,"by":140,"text":141},"4715243","fratis","Folks who've used tour things like this: how do you detect if it's the first time your users are using your app? Do you make a db query every time they log in? Do you use…",{"value":143,"source":79,"evidence":144},"Why bubble is an image instead of CSS",[145,146],{"id":123,"by":124,"text":125},{"id":119,"by":120,"text":121},[148],{"value":149,"source":79,"evidence":150},"bootstrap-tour, pageguide, aSimpleTour, jQuery Joyride, Taurus, Kera",[151,155,159],{"id":152,"by":153,"text":154},"4716464","johnx123-up","Similar jQuery plugins: 1. http:\u002F\u002Fsorich87.github.com\u002Fbootstrap-tour\u002F 2. http:\u002F\u002Ftracelytics.github.com\u002Fpageguide\u002F 3. http:\u002F\u002Ftympanus.net\u002FDevelopment\u002FWebsiteTour\u002F 4.…",{"id":156,"by":157,"text":158},"4714810","yefim323","Seems very similar to https:\u002F\u002Ftaurus.io\u002F",{"id":160,"by":161,"text":162},"4714923","aviv","You're probably thinking about http:\u002F\u002Fkera.io\u002F",{"comments":164,"answered":165,"key":166},8,4,[167,170,171],{"id":168,"text":169},"4715420","Great feedback, I don't know what your tour looked like and what the level of text was but I would hope that by keeping the individual points very simple and visually attractive…",{"id":50,"text":51},{"id":172,"text":173},"4714979","Hey, good feedback for sure - in all there is no button so as to keep the aesthetic simple - the entire bubble is always the button. The first step in the tour tells the user…",{"commenters":175,"max_depth":38,"maker_replies":164,"first_comment_mins":38,"lifespan_hours":176},16,10,[178,180,182,184,186,188,189,191,194,197,199,200,202,205,206,209,211,213,215,218,219,222,223,224,228],[102,36,31,179,103,36],"project\u002Fcritical\u002Fperformance",[168,36,36,181,11,31],"maker\u002Fneutral\u002Fdesign",[106,36,31,183,103,36],"project\u002Fcritical\u002Fidea",[50,31,36,185,11,31],"project\u002Fneutral\u002Fnone",[112,31,31,187,113,36],"project\u002Fcritical\u002Fdesign",[172,31,36,181,11,31],[139,32,38,190,140,36],"project\u002Fneutral\u002Fexecution",[192,32,36,193,11,31],"4715410","maker\u002Fneutral\u002Fexecution",[195,32,30,196,140,36],"4715725","maker\u002Fpositive\u002Fexecution",[152,38,36,198,153,36],"other\u002Fneutral\u002Fnone",[123,165,31,187,124,36],[86,30,30,201,87,36],"project\u002Fpositive\u002Fpricing",[119,203,38,204,120,36],6,"project\u002Fmixed\u002Fexecution",[71,203,36,193,11,31],[94,207,30,208,95,36],7,"project\u002Fpositive\u002Fidea",[131,164,38,210,132,36],"project\u002Fmixed\u002Fdesign",[212,164,36,181,11,31],"4715590",[156,214,36,198,157,36],9,[216,214,36,198,217,36],"4714905","kurrent",[160,214,36,198,161,36],[220,214,36,221,11,31],"4714967","project\u002Fneutral\u002Fidea",[82,214,30,208,83,36],[58,176,30,208,59,36],[225,226,31,183,227,36],"4715815",11,"xanadohnt",[229,226,36,181,11,31],"4716285",[],[232,237,242,246,250,254],{"id":233,"name":234,"points":235,"category":236},"4723591","Circular",160,"productivity",{"id":238,"name":239,"points":240,"category":241},"4725210","Introducting C+",148,"languages",{"id":243,"name":244,"points":245,"category":20},"4725396","Python Tools for Visual Studio (PTVS)",139,{"id":247,"name":248,"points":249,"category":20},"4713110","Propeller",126,{"id":251,"name":252,"points":249,"category":253},"4714088","Django drip","web_saas",{"id":255,"name":256,"points":257,"category":20},"4706037","violin",105,false,"v2",{"id":261,"name":5,"line":6,"ai":258,"cat":20,"year":13,"points":14,"comments":15,"rec":27,"s":262,"top":18,"kw":263,"maker":11,"domain":10,"tier":19,"attempts":36,"strip":264,"url":9,"mix":265,"praise":78,"objection":99,"sub":21},4714548,0.03,[21,24,25,26],"1010103050153053000005510",[30,31,32,30],1793990886856]