5 ms·

Hey everyone, I'm Michael, a product engineer at Hyperink. Over the past month or so, I've been developing a rich, social reading experience for our content, fr

Hey everyone, I'm Michael, a product engineer at Hyperink. Over the past month or so, I've been developing a rich, social reading experience for our content, freeing us from the stranglehold of MOBI and EPUB file formats. Today, Jeff Atwood generously granted us permission to release half of his book completely free on this Crowd Reader (paid customers get to see all of it there). The problem: paperback/print always wins over digital and arguably e-ink. Our solution: make reading a unique and asynchronously social experience. I've love to get some beta feedback and hopefully some suggestions for how to improve the UI/UX. Thanks, and happy reading! UPDATE: forgot to mention. This app is 100% JavaScript with Node and my own JS makeshift library on the front. MongoDB for database. Madness.

sidcool 14y ago
Hi Michael, nice to talk to the engineer of the product. I purchased this book last week and it's pretty good. The reading experience is smooth. What I would like to suggest is making it more like Google web app for reading. It's fast and scrolls horizontally, much naturally like a book.
lobster_johnson 14y ago
Scrolling is severely buggy in Chrome (20.0.1132.57 on OS X) and partially buggy in Firefox (13.0). I did some screen captures. #1 (https://www.dropbox.com/s/bczmu8kjfhn6ymr/bug1.mov https://www.dropbox.com/s/bczmu8kjfhn6ymr/bug1.mov): Scrolling is actually faster in the upward direction than the downward direction. In this video, I continuously move my fingers on my trackpad up 1cm and down 2cm. You would expect the same movement to scroll equivalent distances, but it does not. In fact, you will see that sometimes it stutters or will not scroll at all. (There is nothing wrong with my trackpad, and the problem only affects your site.) This problem affects both Chrome and Firefox. #2 (https://www.dropbox.com/s/x9zzd298v85atf9/bug2.mov https://www.dropbox.com/s/x9zzd298v85atf9/bug2.mov): The viewport is often mysteriously constrained and refuses to scroll any further, even though there is more text. In this video, I opened a fresh window, immediately clicked on one of the chapters, and tried to scroll downards. You'll see me struggle for a bit, then scroll to the previous chapter and then back to the original chapter. Only after doing this am I able to scroll downwards. Seems to affect Chrome only. Looks promising aside from these rather severe issues.
- neoveller 14y ago
  I'm a little baffled by this report, but I don't at all suspect it's inaccurate. I'm on the same version of Chrome on OSX on a macbook air (where I developed the custom scrollbar). Programmatically, I'm using the "scroll wheel"'s delta increment to determine the distance to scroll--the same amount in both directions. If anyone with relevant experience developing JS interaction with the scroll wheel has any hints or related knowledge, I'd love to hear it. Thanks for the thorough feedback and videos. Looking forward to making the scroll bar perfect!
- alainbryden 14y ago
  I can confirm this. My scroll wheel is very easy to move one increment at a time, and repeatedly moving down one then up one increment results in text moving upwards about 4 lines per cycle. When testing on this site: http://www.javascriptkit.com/javatutors/onmousewheel.shtml http://www.javascriptkit.com/javatutors/onmousewheel.shtml I can confirm that scrolling up and down provide a delta of 1200 and -1200 respectively, the way it's being handled on your app must not be even.
LaSombra 14y ago
I liked the UI/UX. The typography is very nice. I would make the right bar optional and add to it an option to write notes. Thank you Michael, great work!
pfraze 14y ago
Looks good. The "heart" on paragraphs is cool -- now just make it so you can sort by hearts for a quick view of highlights. You could then jump to a selected paragraph in the correct ordering, if you want to read more of the context.
- neoveller 14y ago
  That's actually some really kickass feedback that we now have no choice but to implement! Thanks pfraze!
  - pfraze 14y ago
    Cool, look forward to seeing it in action
- lucidusvenerat 14y ago
  I second this. Being able to pick out the most hearted segments across an entire chapter, even the entire book, would make it easy to skim chapters. I could look at the top snippets, see if they're compelling, and then commit to reading an entire chapter based on that impression.
  - jennyma 14y ago
    Agreed! And the best part is being able to discuss specific parts of a book.
tmpaccount 14y ago
Hi Michael. Congratulations on building a very good product. It's probably the best web-based e-reader I've seen, apart from the 'social' bits. No doubt the great majority of your users like them, but they're a useless annoyance to me. If you could add an option in the user preferences to suppress all the social stuff, you'd have me as a user right away. A small note: the scrolling code seems to break mouse-gesture history navigation in Chrome 20.0.1132.57 on OS X - my attempt to go back just scrolled the page up...
adamzochowski 14y ago
Hi Michael. The scroll is different from OS Scroll. It is much slower, moving at a pixel per scroll wheel event. Also [space] doesn't do page down. Running Chromium 18.0.1025.168 (Developer Build 134367 Linux) Ubuntu 12.04, with smooth scrolling enabled (in about:flags )
- neoveller 14y ago
  Good call, and easy enough. Added spacebar support live, and the scroll should be twice as fast as previous. Let me know if that's more livable. Thanks!
jforman 14y ago
This reading app has wonderful UX — my feedback is somewhat biased, admittedly, because it's ripped straight off from us (Inkling): http://tinyurl.com/inkling-frommers-france http://tinyurl.com/inkling-frommers-france (yes, you have to create an account to view content, but it only takes a second)
- neoveller 14y ago
  You guys really did create a wonderful UX for a very separate market segment. Admittedly, we did draw some conceptual inspiration from your reader. In my defense, I will say that UX/UI is very constrained by a set number of factors which make "sidebars" necessary/obvious/essential and the organization of them preferable over other organization possibilities (TOC on left, misc on right). I'll admit that you executed this arrangement visually much better than I did, in my attempt not to scalp. I'm a big fan of Inkling, and you guys make me wish I was still in school so I could use your reader. Major props.
  - jforman 14y ago
    The UX is so constrained that you had no choice other than to straight up copy: a) a control to hide the table of contents with a semi-transparent strip hover; b) a table of contents with a near-identical layout; c) a "next page" bumper with opacity-on-hover; d) an annotation stream in a third, right-handed column; d) a cute octopus mascot; etc. etc. That's not to mention the store. I mean...imitation may be the sincerest form of flattery, but I draw a line at copying Otto the Octopus.
    - neoveller 14y ago
      I'm not going to argue with you--we have a better service. Would you mind sending me a URL to an image of your octopus? He seems to be in hiding.
      - peter_l_downs 14y ago
        Hey, jforman seems to be afk, but here's what I found online: http://ducksonly.com/images/81080-2.jpg http://ducksonly.com/images/81080-2.jpg

sidcool 14y ago

Hi Michael, nice to talk to the engineer of the product. I purchased this book last week and it's pretty good. The reading experience is smooth. What I would like to suggest is making it more like Google web app for reading. It's fast and scrolls horizontally, much naturally like a book.

lobster_johnson 14y ago

Scrolling is severely buggy in Chrome (20.0.1132.57 on OS X) and partially buggy in Firefox (13.0). I did some screen captures. #1 (https://www.dropbox.com/s/bczmu8kjfhn6ymr/bug1.mov https://www.dropbox.com/s/bczmu8kjfhn6ymr/bug1.mov): Scrolling is actually faster in the upward direction than the downward direction. In this video, I continuously move my fingers on my trackpad up 1cm and down 2cm. You would expect the same movement to scroll equivalent distances, but it does not. In fact, you will see that sometimes it stutters or will not scroll at all. (There is nothing wrong with my trackpad, and the problem only affects your site.) This problem affects both Chrome and Firefox. #2 (https://www.dropbox.com/s/x9zzd298v85atf9/bug2.mov https://www.dropbox.com/s/x9zzd298v85atf9/bug2.mov): The viewport is often mysteriously constrained and refuses to scroll any further, even though there is more text. In this video, I opened a fresh window, immediately clicked on one of the chapters, and tried to scroll downards. You'll see me struggle for a bit, then scroll to the previous chapter and then back to the original chapter. Only after doing this am I able to scroll downwards. Seems to affect Chrome only. Looks promising aside from these rather severe issues.

neoveller 14y ago
I'm a little baffled by this report, but I don't at all suspect it's inaccurate. I'm on the same version of Chrome on OSX on a macbook air (where I developed the custom scrollbar). Programmatically, I'm using the "scroll wheel"'s delta increment to determine the distance to scroll--the same amount in both directions. If anyone with relevant experience developing JS interaction with the scroll wheel has any hints or related knowledge, I'd love to hear it. Thanks for the thorough feedback and videos. Looking forward to making the scroll bar perfect!
alainbryden 14y ago
I can confirm this. My scroll wheel is very easy to move one increment at a time, and repeatedly moving down one then up one increment results in text moving upwards about 4 lines per cycle. When testing on this site: http://www.javascriptkit.com/javatutors/onmousewheel.shtml http://www.javascriptkit.com/javatutors/onmousewheel.shtml I can confirm that scrolling up and down provide a delta of 1200 and -1200 respectively, the way it's being handled on your app must not be even.

LaSombra 14y ago

I liked the UI/UX. The typography is very nice. I would make the right bar optional and add to it an option to write notes. Thank you Michael, great work!

pfraze 14y ago

Looks good. The "heart" on paragraphs is cool -- now just make it so you can sort by hearts for a quick view of highlights. You could then jump to a selected paragraph in the correct ordering, if you want to read more of the context.

neoveller 14y ago
That's actually some really kickass feedback that we now have no choice but to implement! Thanks pfraze!
- pfraze 14y ago
  Cool, look forward to seeing it in action
lucidusvenerat 14y ago
I second this. Being able to pick out the most hearted segments across an entire chapter, even the entire book, would make it easy to skim chapters. I could look at the top snippets, see if they're compelling, and then commit to reading an entire chapter based on that impression.
- jennyma 14y ago
  Agreed! And the best part is being able to discuss specific parts of a book.

tmpaccount 14y ago

Hi Michael. Congratulations on building a very good product. It's probably the best web-based e-reader I've seen, apart from the 'social' bits. No doubt the great majority of your users like them, but they're a useless annoyance to me. If you could add an option in the user preferences to suppress all the social stuff, you'd have me as a user right away. A small note: the scrolling code seems to break mouse-gesture history navigation in Chrome 20.0.1132.57 on OS X - my attempt to go back just scrolled the page up...

adamzochowski 14y ago

Hi Michael. The scroll is different from OS Scroll. It is much slower, moving at a pixel per scroll wheel event. Also [space] doesn't do page down. Running Chromium 18.0.1025.168 (Developer Build 134367 Linux) Ubuntu 12.04, with smooth scrolling enabled (in about:flags )

neoveller 14y ago
Good call, and easy enough. Added spacebar support live, and the scroll should be twice as fast as previous. Let me know if that's more livable. Thanks!

jforman 14y ago

This reading app has wonderful UX — my feedback is somewhat biased, admittedly, because it's ripped straight off from us (Inkling): http://tinyurl.com/inkling-frommers-france http://tinyurl.com/inkling-frommers-france (yes, you have to create an account to view content, but it only takes a second)

neoveller 14y ago
You guys really did create a wonderful UX for a very separate market segment. Admittedly, we did draw some conceptual inspiration from your reader. In my defense, I will say that UX/UI is very constrained by a set number of factors which make "sidebars" necessary/obvious/essential and the organization of them preferable over other organization possibilities (TOC on left, misc on right). I'll admit that you executed this arrangement visually much better than I did, in my attempt not to scalp. I'm a big fan of Inkling, and you guys make me wish I was still in school so I could use your reader. Major props.
- jforman 14y ago
  The UX is so constrained that you had no choice other than to straight up copy: a) a control to hide the table of contents with a semi-transparent strip hover; b) a table of contents with a near-identical layout; c) a "next page" bumper with opacity-on-hover; d) an annotation stream in a third, right-handed column; d) a cute octopus mascot; etc. etc. That's not to mention the store. I mean...imitation may be the sincerest form of flattery, but I draw a line at copying Otto the Octopus.
  - neoveller 14y ago
    I'm not going to argue with you--we have a better service. Would you mind sending me a URL to an image of your octopus? He seems to be in hiding.
    - peter_l_downs 14y ago
      Hey, jforman seems to be afk, but here's what I found online: http://ducksonly.com/images/81080-2.jpg http://ducksonly.com/images/81080-2.jpg