Challenging usability and UX design of online notebook

Discussions about the Notes and Journal tool on LDS.org. This includes the Study Toolbar as well as the scriptures and other content on LDS.org that is integrated with Notes and Journal.
stevefrancia
New Member
Posts: 2
Joined: Sat Apr 16, 2016 1:26 pm
Contact:

Challenging usability and UX design of online notebook

Postby stevefrancia » Sat Apr 16, 2016 1:59 pm

I love the note taking functionality provided by the lds tools and apps throughout the scriptures, conference, lessons etc. It has changed the way I read and study and I'm very grateful. I feel a bit weird posting this about a tool the church created and provides for free, but I'm disappointed with the current state of the web notebook and scripture, conference, etc integration. It's lacking some key design features and fails to follow established usability guidelines that would make it a really powerful tool. The apps are great, but sometimes having a full screen and a keyboard are essential, especially when preparing lessons. Unfortunately the web interface is so lacking in some areas that it's impossible to use effectively and I frequently settle to using the apps.

There could be a really powerful study tool and the current design shows a glimpse of what it could be. We really need a full window (or similar) online application that permits showing and creating annotations, links, etc alongside the content (conference, scriptures, etc). We also would strongly benefit from a better notes app that followed modern usability guidelines and had features like sorting, support for images & rich text, citations, etc would be amazing. While some of these features would require a lot of work, some of them are simple design changes or other small tweaks that wouldn't require any backend changes.

Sometimes things are easier conveyed in pictures rather than words. I've put together these pair of attached screenshots with some annotations.

To provide some background, these suggestions come from a place of love and respect as well as two decades of experience in product design, software engineering and architecture. I'm happy to provide mockups, ideas, feedback or even contribute code. I just really want an amazing integrated study tool that all members and friends would benefit from.
Attachments
1_Nephi_13_and_Apostasy_-_Google_Docs.png
(724.22 KiB) Not downloaded yet
Notes_and_Journal_and_Apostasy_-_Google_Docs.png
(1.05 MiB) Not downloaded yet

stevefrancia
New Member
Posts: 2
Joined: Sat Apr 16, 2016 1:26 pm
Contact:

Re: Challenging usability and UX design of online notebook

Postby stevefrancia » Sat Apr 16, 2016 2:33 pm

In browsing the forum more completely I now see that this is a user only forum and not the correct place for this post. Apologies to all. I'm still not clear on where the best place is to submit this feedback though. One feedback link I clicked on was a 404. This was the second link I found and apparently isn't correct either. If anyone could point me in the right direction, I'd appreciate it.

User avatar
sbradshaw
Senior Member
Posts: 2485
Joined: Mon Sep 26, 2011 8:42 pm
Location: Provo, UT
Contact:

Re: Challenging usability and UX design of online notebook

Postby sbradshaw » Sat Apr 16, 2016 3:11 pm

I agree that the online study experience is a little behind the app study experience. This is a good discussion topic.
The best place to get feedback to the developers and priority-setters is using the feedback link at the bottom of LDS.org.
Samuel Bradshaw • Interested in church apps and sites, creative recordkeeping, clerk support, YSA wards and stakes, LDS music, Vineyard at BYU, and online service.

bsimon1
New Member
Posts: 3
Joined: Sun Apr 27, 2014 11:24 am

Re: Challenging usability and UX design of online notebook

Postby bsimon1 » Mon Apr 18, 2016 10:11 am

Only feedback link I've seen is on the main site near the bottom and links to this page https://www.lds.org/tools/feedback/

Looks like they are using a responsive design for most of the site(s) with a maximum width on the inner section around 970px. IMO this was pretty standard not too many years ago. You just didn't have many people running that wide of resolution on their monitors. That being said, most larger responsive sites I've created lately use breakpoints 1100px+ because a lot of people have larger monitors and frequently run a 1920 x 1080 or higher res.

The comparison between the mobile apps and the web are useful but there are a lot of variables when designing for different browsers, browser versions, and OS's on the desktop. That certainly doesn't justify neglecting your sites stylesheets for years but may explain why the devs and designers have chosen to stop supporting at a certain size.

bsimon1
New Member
Posts: 3
Joined: Sun Apr 27, 2014 11:24 am

Re: Challenging usability and UX design of online notebook

Postby bsimon1 » Mon Apr 18, 2016 10:41 am

Spent a few minutes overriding the Notes page's CSS to use relative widths vs absolute values and came up with this. It shouldn't be "too hard" to give that page a refresh:
Notes and Journal.jpg
(151.98 KiB) Not downloaded yet

Now what to do with that extra space... ;-)

Here are my overrides. They are just for larger size monitors so I would tweak them for smaller sizes/breakpoints.

Code: Select all

.pf-canvas-wrapper #platform-canvas {
   width:100%;
}
#platform-canvas #platform-canvas-content {
   width: 100%;
}
#platform-canvas-content #secondary {
   min-width: 185px;
   width: 15%;
}
#platform-canvas-content #primary {
    min-width: 747px;
    width: 80%;
    float: right;
}
#primary #toolbar-placeholder {
   background-size: 100% 74px;
   margin-left: -4px
}
#platform-canvas-content #primary #content-secondary {
   width: 30%;
}

#platform-canvas-content #primary #content-primary {
   width: 65%;
}

mevans
Senior Member
Posts: 1282
Joined: Tue May 22, 2012 12:52 pm
Location: California, USA

Re: Challenging usability and UX design of online notebook

Postby mevans » Sun Jun 05, 2016 7:49 am

There was a related discussion about usability a while back. See LDS.org Responsive Design Oddities. This person created a stylesheet we can use with the Stylish extension. It solves some problems. Looks like you solved some others. For whatever reason, the church doesn't seem interested in fixing this. I'm glad they're doing responsive designs, but I wish the designs responded to those of us with bigger screens :) Maybe people can work together to fix the CSS for lds.org in a single CSS fix we can use on lds.org. That would be nice, but it's a lot of different pages within lds.org.

There was a note a while back on this forum from one of the church service representatives that the Notebook feature is on the list for revamp, but we know nothing about the timeline. The Notes feature can be incredibly powerful. In a world where technology is often times a distraction from the spiritual, the Notes feature is the complete opposite: it can use technology to facilitate personal revelation and bless the lives of many church members. I wish it was a higher priority. Right now it's only in English and we've learned that all the articles need to be encoded to work with the study tools, so it's not necessarily a trivial undertaking to make it work.

scottrileyjones
New Member
Posts: 4
Joined: Sun Oct 11, 2015 8:32 am

Re: Challenging usability and UX design of online notebook

Postby scottrileyjones » Wed Aug 03, 2016 7:18 pm

Im glad this is a topic of discussion. I have thousands of tagged passages in my gospel library but reviewing and retrieving and organizing it in any meaningful way is extremely difficult via lds.org. Would love to see some of our development genius focus on this area.


Return to “Notes and Journal, and Online Scriptures”

Who is online

Users browsing this forum: No registered users and 1 guest