Project

General

Profile

Actions

Feature #6301

closed

Build New Help UI Based on Wire Frames

Added by Stephen Real over 7 years ago. Updated almost 7 years ago.

Status:
Resolved
Priority name:
Normal
Assignee:
Daniel Jones
Category name:
Help/Codex
Target version:
Start date:
2016-10-14
Due date:
% Done:

0%

Estimated time:
Deployment actions:

Files

CUNY new help pages.pdf (739 KB) CUNY new help pages.pdf Boone Gorges, 2016-11-23 10:37 AM
Screen Shot 2017-05-02 at 10.31.08 AM.png (87.1 KB) Screen Shot 2017-05-02 at 10.31.08 AM.png Paige Dupont, 2017-05-02 10:33 AM
FAQ White Text.jpg (322 KB) FAQ White Text.jpg Daniel Jones, 2017-05-12 01:58 PM
FAQ Dark Blue Text.jpg (329 KB) FAQ Dark Blue Text.jpg Daniel Jones, 2017-05-12 01:58 PM
2017-05-16_08-03-02.png (11.2 KB) 2017-05-16_08-03-02.png Stephen Real, 2017-05-16 08:05 AM
2017-05-16_10-33-05.png (50.4 KB) 2017-05-16_10-33-05.png Stephen Real, 2017-05-16 10:34 AM
Actions #1

Updated by Boone Gorges over 7 years ago

  • Category name set to Help/Codex
  • Assignee set to Margaret Galvan
  • Target version set to Future release

Assigning to Maggie.

Maggie, I assume your first step will be (or already is!) looking for existing WP themes that will get you most of the way to Paige's wireframes. Let me know if you need some assistance or a second set of eyes as you go through the process.

Depending on the theme you select, your strategy for customization (a child theme vs a fork), and the extent of the customizations necessary, it might be possible to deploy the unfinished theme, just for the purposes of staging content. We can talk about this when you zero in on your theme strategy.

Feel free to open more specific tickets - with this one as a parent - for any issues that may arise during implementation.

Actions #2

Updated by Margaret Galvan over 7 years ago

Hi all,

Here’s a rundown of where I am in the Help Redesign process. I’ve been digging through themes and plugins as I review the wireframes and think about what sort of functionality will be needed for the new Help site. I’ll soon start putting these elements into play on the test site, but I would appreciate your feedback on any of the following.

Theme Selection

I’ve started by looking through the themes already available on the Commons. I’m prioritizing themes that are still in the WordPress.org theme repository and have received recent updates, since those themes are the most likely to have some of the more current web development functionality like parallax scrolling, responsive design, etc. baked into the theme itself. As you’ll see below, there’s the ability to add parallax scrolling through a plugin if needed. Based on the Help wireframe, I am also looking for a theme with a full-width template with custom header and good widget areas, including in the footer. The four column section on the first page of the wireframe is another thing I’m on the look-out for in the theme—although that might be able to be solved independently through the Column Shortcodes plugin (https://wordpress.org/plugins/column-shortcodes/).

Given all of this, these are the themes under consideration. If you have additional themes to suggest or would advise avoiding any of these, let me know.

I currently have Onetone activated because the “business” slant to this theme makes it seem like it can accomplish much of what’s desired. To note, of course, is that there are a lot of business/ecommerce themes on the WordPress.org theme repository if there are sticking points with this theme—though some also are limited because they have higher-powered paid versions of the theme.

Plugins

Parallax Scrolling

The need for selective parallax scrolling is indicated on page 4 of the Help wireframes: “You’ll notice as you scroll down on the page, the black header area will shrink up a bit, and just show your name and avatar. You can scroll back up to see full header details.” If the selected theme doesn’t have parallax scrolling, there are plugins that can enable parallax scrolling for part of a website. We don’t seem to have a general plugin for this function on the Commons (https://wordpress.org/plugins/tags/parallax).

Breadcrumbs

For breadcrumb navigation, I am turning to the Yoast SEO plugin, which has Breadcrumbs settings when you enable the advanced tools and navigate to the Advanced section (http://www.wpbeginner.com/plugins/how-to-display-breadcrumb-navigation-links-in-wordpress/). If that plugin doesn’t suffice, I will try the Really Simple Breadcrumbs plugin on the Commons—although it looks like this plugin is deprecated and supplanted by plugins like Breadcrumb NavXT (https://wordpress.org/plugins/breadcrumb-navxt/) since it’s no longer listed in the WordPress.org plugin repository.

Displaying multiple sections of content down the page

In addition to the need for a full-width template, it seems that multiple sections of content with different background colors—and sometimes fields of content like the profile fields as indicated on page 4 of the Help wireframes—will be needed on certain pages. To solve this problem, I figured that a plugin that allowed for configurable content blocks would be useful. A plugin that I’ve used in the past for this—WP Boxer—that allowed you to create categorizable content that you could pull up by shortcode across a number of posts and/or pages is deprecated, but it looks like the Advanced Custom Fields plugin on the Commons can create flexible content (https://www.advancedcustomfields.com/resources/flexible-content/) —although it’s not clear (to me yet) if you can create content blocks that you’d use across multiple pages since you generate the content block within the page or post editor for the page/post that you want to create the content for.

If anyone knows a better plugin for this function, let me know. Additionally, let me know if you need me to clarify my meaning here.

Search

For the search functionality of the Help page (shown on pp. 5-6), I’ve activated the Search Everything plugin (https://wordpress.org/plugins/search-everything/).

Last Thoughts/Help Test Site

I welcome any comments about these thoughts as I start to develop the Help redesign on a test site. If there are any major parts of the Help redesign that I’m missing or themes/plugins/needed features that I’ve overlooked, please let me know.

If you haven’t received an invitation to the test site, let me know what email address you’re using on the Commons.

Also, Boone, what’s the best way to import the existing Help content into the test site to guide the redesign?

Actions #3

Updated by Matt Gold over 7 years ago

Fantastic work on this, Maggie! Thanks so much not only for your thoughtful approach and your considerable research, but also for your careful documentation of your process.

The main question I continue to have about the help site is how search functionality will be integrated into it and whether we will be using native WP search or some other search process.

Actions #4

Updated by Boone Gorges over 7 years ago

Hi Maggie - Thanks for your work and your summary! A couple notes.

The need for selective parallax scrolling is indicated on page 4 of the Help wireframes: “You’ll notice as you scroll down on the page, the black header area will shrink up a bit, and just show your name and avatar. You can scroll back up to see full header details.”

I believe that this text on p4 of the wireframes (uploaded here for convenience) is sample text pulled from an existing Help page; in this case, it refers to the existing Public Portfolio pages. I don't think it's part of the Help spec. Paige, can you confirm?

I currently have Onetone activated because the “business” slant to this theme makes it seem like it can accomplish much of what’s desired.

The themes you've referenced seem like good ones. I definitely like the idea of selecting, in part, based on how well-maintained the theme is. I have not done hands-on experimentation, but I assume that the themes make it possible to create layouts other than what's specified on the demo pages, so four-column may be straightforward-ish. At the very least, it'd be possible to build it with a custom home template, though perhaps you'd like to consider that only as a last resort.

In addition to the need for a full-width template, it seems that multiple sections of content with different background colors—and sometimes fields of content like the profile fields as indicated on page 4 of the Help wireframes—will be needed on certain pages.

I believe that this is also part of the dummy text that Paige used. It looks to me like single help pages have a header area and a footer area, but that the content area in between is undifferentiated images/text, as you'd add through the normal WP editor.

Responding to Matt:

The main question I continue to have about the help site is how search functionality will be integrated into it and whether we will be using native WP search or some other search process.

Maggie indicated that she was considering Search Everything. It appears that this plugin uses the existing MySQL database (no special indexing tools), but that it adds the ability to match against things like categories and tags, as well as improved weighting for title matches, etc. The MySQL-based approach means that it's not extremely scalable, but that shouldn't be a problem given our relatively small amount of content.

Also, Boone, what’s the best way to import the existing Help content into the test site to guide the redesign?

I'd suggest using WP's built-in export/import features. I've just added you to help.commons.gc.cuny.edu and codex.commons.gc.cuny.edu as an Administrator so you have export access. (I'm unclear on whether the contents are being merged.) Dashboard > Tools > Export. Then, use the XML files to import to the test site (Dashboard > Tools > Import > WordPress)

Actions #5

Updated by Margaret Galvan over 7 years ago

Thanks Matt and Boone for your feedback here. Thanks, Boone, for adding me to the Help & Codex sites.

I want to reiterate Boone's last comment above in confirming whether the Help redesign will also incorporate the content from the Codex site (codex.commons.gc.cuny.edu) or not.

Actions #6

Updated by Paige Dupont over 7 years ago

I believe that this text on p4 of the wireframes (uploaded here for convenience) is sample text pulled from an existing Help page; in this case, it refers to the existing Public Portfolio pages. I don't think it's part of the Help spec. Paige, can you confirm?

Yes, that is just sample text pulled from an existing Help page! Sorry for the late response.

I want to reiterate Boone's last comment above in confirming whether the Help redesign will also incorporate the content from the Codex site (codex.commons.gc.cuny.edu) or not.

Yes, I believe Steve and other members of the team have been going through the codex content and deciding which pieces of information are staying/going. I would check with him to see as to what has actually been archived because I think most of it is moving over.

In the wireframes, the long content pages (page 4) has the drop links at the top and I designed this with the codex in mind since some of the content there is pretty long. Knowing that most of the codex content was moving over, I wanted to keep in mind that all help section content should be formatted the same way for consistency and clarity (an issue I feel is happening with the current help page).

Actions #7

Updated by Margaret Galvan over 7 years ago

Thanks all for your feedback on this thread, which clarified some points of the wireframes in terms of how to focus the theme development. I have imported the content into the Help Test page (https://helptest.commons.gc.cuny.edu/) from https://codex.commons.gc.cuny.edu/ (and not from https://help.commons.gc.cuny.edu/) upon learning from CAC team members that the Codex site contained the most recent material. I have been focusing on the front page development in trying a number of potential themes, some that I tested on the Help Test site and some (which are not publicly available on the Commons) that I tested on other WordPress platforms that I have easy access to. I’m documenting the theme process below.

OneTone: While this one-column business theme looked promising at first, it has too many elements built into it that would need to be stripped out and reconfigured. Moreover, its free version is a bit limited in how far you can go because they want you to pay access for the paid version to gain more control over design. As an example, the basic template comes with a video background and audio file, which the theme documentation describes how to remove, but that process does not in fact remove either in our installation and the support forums on WordPress.org suggest that others with the free version have encountered the same problem. Overall, this theme is overbuilt and too specific for our purposes.

Sensitive: While Sensitive was a contender because it allowed for four columns of featured content, it drew this content from page/post content rather than widgets. Additionally, the theme hasn’t been updated in a year, so it is likely not a good idea to develop on top of something that is already out of sync with recent WordPress developments.

After working through those themes, I turned to testing some non-Commons themes on another WordPress platform that I have easy access to.

Pinboard (https://wordpress.org/themes/pinboard/): While Pinboard is a flexible theme that I’ve had a lot of success with in the past, particularly given its widget areas in the header and full-width layouts, it, like Sensitive, hasn’t been updated since last year. I could see how this lack of an update was leading to some wonky implementation by testing its functionality, particularly the header widget areas, and looking through the bevy of unresolved issues in its support forum on WordPress.org.

Twenty Sixteen (https://wordpress.org/themes/twentysixteen/): Since the WordPress core themes are well-supported, I took a look at both Twenty Sixteen and Twenty Seventeen (described below). While Twenty Sixteen allows for full-width content, it really is designed to work with a sidebar, so it is not a good fit for the overall schema of what we’re looking for.

Twenty Seventeen (https://wordpress.org/themes/twentyseventeen/; demo: http://2017.wordpress.net/; article: https://premium.wpmudev.org/blog/twenty-seventeen-wordpress-theme/): In some ways, Twenty Seventeen is a stripped-down, more accessible version of OneTone. Due to this fact, I spent a fair amount of time testing Twenty Seventeen and poring through the documentation. While its front page allows for a lot of sections built from a number of pages, which could meet the needs of the landing page for the Help redesign, Twenty Seventeen is built to meet the needs of a business website in a very specific way that diverts from the needs of the Help redesign. The most obvious of these, perhaps, is the reliance on large-scale visuals for the different sections of the webpage.

Given all of this, I am currently building in features of the Help redesign on the Flat Bootstrap theme (https://wordpress.org/themes/flat-bootstrap/; demo: http://xtremelysocial.com/wordpress/flat/), which pitches itself to developers and has been updated fairly recently. I have also looked through Customizr (described previously in this thread, updated very recently, available on the Commons) and Clean Retina (https://wordpress.org/themes/clean-retina/ updated very recently, not available on the Commons), but both of these themes offer free versions with more of the advanced capabilities only available for those who choose to develop with their paid versions.

Actions #8

Updated by Matt Gold over 7 years ago

  • Assignee changed from Margaret Galvan to Boone Gorges
  • Target version changed from Future release to 1.11

Thanks, Maggie. And given our email conversation, I am reassigning this back to Boone for further development as you begin work on the Theme/Plugin audit projects. If I'm mistaken about that, please let me know.

Actions #9

Updated by Boone Gorges over 7 years ago

Thanks for the summary, Maggie. Flat Bootstrap seems like a good starting point.

I'll take a first pass through the technical details sometime in January, and decide then whether I'll wrap up the implementation myself or pass it along to another member of the team.

Actions #10

Updated by Boone Gorges about 7 years ago

A couple questions for the group (wireframe https://redmine.gc.cuny.edu/attachments/download/4034/CUNY%20new%20help%20pages.pdf for reference):

1. The front page has four category boxes. The headings in the wireframes - "My Account", "Customize My Commons", etc - don't line up with the categories actually in use on https://codex.commons.gc.cuny.edu. For top-level organization, will we be sticking to the hierarchy already in place at https://codex.commons.gc.cuny.edu/wp-admin/edit-tags.php?taxonomy=category&post_type=page (top level categories: Basics, Groups, Sites, Getting More)? Do we want to mirror these categories in the home page boxes? I don't think we have to - for example, I like the idea of a "Reporting Problems" section on the home page. I'd like to make it as easy as possible for admins like Scott to manage the links that are shown in these areas, and this'll be easiest to conceptualize once I know whether/how the areas map onto existing taxonomies.

2. It looks like FAQ are currently powered by https://codex.commons.gc.cuny.edu/wp-admin/edit.php?post_type=qa_faqs. Will the "Quick Answers" section on the home page pull from FAQs? How? Should there be a "featured" category for FAQs or something like that? Or perhaps I should take the top 10 items or something (I see that FAQs can be reordered manually)?

3. Page 2 of the wireframes appears to show what I'd call a Category Page: a summary page related to a category of help pages, with links to related FAQs. Is that understanding correct? I can make the FAQ section on this page automatically populated by related FAQs, but for that purpose it'll be necessary to understand how these Pages map onto FAQ categories: https://codex.commons.gc.cuny.edu/wp-admin/edit.php?post_type=qa_faqs. Will these Category Pages correspond to page categories (Basics, Groups, etc) or to the "section boxes" on the home page ("My Account", etc). If the latter, then I assume that these pages will be accessed by clicking on the section-box header; if the former, I'm unsure how you'll get to these pages from the home page.

The wireframes themselves are pretty straightforward - I should be able to get a prototype together pretty quickly once I understand how the taxonomy and site architecture works. Thanks in advance for your help!

Actions #11

Updated by Stephen Real about 7 years ago

Boone,
Paige and I worked out the following map of Home Page Boxes to Categories:
Box 1: Personalize My Commons: Maps to the Categories, Commons Basics and Group Member Help
Box 2: Manage a Site: Maps to Site Design and Functionality
Box 3: Manage a Group: Maps to the Category Group Administrator Help
Box 4: Get Creative: Maps to Getting More from the Commons

You will note that the labels have evolved and no longer match the wire frame

The Quick Answers section does map to FAQ's. I think, to keep it simple, we should manage that manually for now.

Page 2 should primarily be a list of links to posts that match the mapped categories. The wireframe shows some heading display/text that I am agnostic about, but Paige may not be.

Actions #12

Updated by Boone Gorges about 7 years ago

Thanks for the update. The box-to-category map seems OK to me. How do you want the boxes populated, based on this information? Should they pull in random items from the specified categories, so it changes on refresh? Or perhaps the most recent items from the corresponding categories? Or something else?

Page 2 should primarily be a list of links to posts that match the mapped categories. The wireframe shows some heading display/text that I am agnostic about, but Paige may not be.

How will the header text etc be managed? There's currently no interface for generating what I'd call "category indexes". How does the following sound: Each of these "category indexes" will be a manually created Page, so that you can use the WP editor to create the top content. Then I'll provide a shortcode along the lines of [help-category-links category=3,12,15], where 3, 12, 15 are the IDs of the categories whose items should be pulled into this list (I just made up those IDs - the real ones will have to be looked up). So the "FAQ" section at the bottom of the page will be automatically generated. Does that sound OK?

And - just to be clear, as I could read either intepretation from your comment - the category indexes will be in one-to-one correspondence with the four home-page boxes, so that there will be four of them, and the first will be titled "Personalize My Commons" and will show items from the Commons Basics and Group Member Help categories. Is that correct?

Actions #13

Updated by Stephen Real about 7 years ago

I defer to Paige on the content for the Boxes on the main page.

As for the Page 2 content, manual pages are fine with me and yes, your interpretation of the mapping is what I intended.

Actions #14

Updated by Boone Gorges almost 7 years ago

  • Assignee changed from Boone Gorges to Daniel Jones

A first pass at the Help theme is now available for viewing on https://helptest.commons.gc.cuny.edu.

I've tried to match each functional part of the wireframes, and I've made a quick attempt to match it visually in most places, though I haven't spent much time with the latter. I assume that we'll want to do a round of visual design work after we get clear on the overall UX.

Most of the site should be pretty self-explanatory, in the context of the conversation above. The four homepage boxes each map to a set of Page categories, as described by Steve here https://redmine.gc.cuny.edu/issues/6301#note-11. The FAQ section on the homepage shows FAQs, ordered by menu order (the drag-and-drop interface in the admin). Each of the four homepage boxes goes to what I've called a "category page", which contains a space for the manual creation of some intro information. These category pages also have a shortcode [cac-help-category-faqs] for showing a dynamic list of FAQs from a given category. See https://helptest.commons.gc.cuny.edu/wp-admin/post.php?post=6343&action=edit for an example.

The Search Everything plugin is installed and returns results that I think are decent. https://helptest.commons.gc.cuny.edu/?s=research

A few questions and thoughts:

1. There are a few Get Help links on the home page and in the footers of single pages. Where do these go? Are they supposed to open the Zendesk modal?
2. Some single pages belong to multiple categories. To build the breadcrumbs, I did the following: Loop through each category the page belongs to, and look for a matching "homepage category". As soon as one is found, use it as the "parent" for the purposes of breadcrumbs. I'm not sure if this is what was intended, or if it makes sense :)
3. Generally, the site organization in this implementation is pretty hard to wrap your head around. Here's the content map, as I understand it:

a. There are two types of content:
- Pages
- FAQs
b. Content is organized in three different ways
- Pages are in Categories (some pages in more than one category)
- Categories are grouped into "homepage categories" - these are the boxes you see on the home page
- FAQs are in "FAQ Categories" - independent of Page Categories - but the FAQ categories are not exposed anywhere but in the "category page" widget areas

The purpose of having Pages in addition to FAQs is not clear to me. I think either they should be merged, or it should be made more evident in the information architecture what different roles they play. If they are to remain separate, I think it's wise for them to share common categorization.

It's not currently possible to drill down into the full library of Pages. The four homepage boxes show the most recent few items from each category group, but there's no way to navigate to a full list. There's also no way to navigate to a full list of FAQs.

I might be alone in thinking that the organization is unclear. If so, please feel free to disregard these comments.

I'm happy to continue to consult on this project, but for further development work, I'm going to put Dan in charge. Dan, the theme is located in the 1.11.x branch, and is called cac-help. Feel free to ping me here or over email if you have technical questions about it. Once you're ready to do another round of testing, let me know and I'll deploy the updated theme from 1.11.x to the production site.

Actions #15

Updated by Stephen Real almost 7 years ago

My credentials are not working on the Test Site.

I am confused about the question regarding the distinction between FAQ and Page Content. In my mind, an FAQ "item" is simply a page that is frequently accessed, so the content is the same, but it is ordered differently. To give you a better answer, though, I need to get onto the test site.

Actions #16

Updated by Stephen Real almost 7 years ago

I just reviewed the content and see that we do have two separate sources of content. We have to merge the FAQ's content into the Pages content and will do that ASAP. Should I use tags to identify the FAQ pages?

Actions #17

Updated by Boone Gorges almost 7 years ago

I've just added you to the site. You should have gotten a confirmation email, with a link to click. Sorry about the confusion.

I am confused about the question regarding the distinction between FAQ and Page Content. In my mind, an FAQ "item" is simply a page that is frequently accessed, so the content is the same, but it is ordered differently. To give you a better answer, though, I need to get onto the test site.

Existing content, imported from codex.commons.gc.cuny.edu, is in two flavors:
1. FAQs https://helptest.commons.gc.cuny.edu/wp-admin/edit.php?post_type=qa_faqs
2. Pages https://helptest.commons.gc.cuny.edu/wp-admin/edit.php?post_type=page

I agree that, in theory, it doesn't make sense to keep them separate in this way, but I'm working with the data and mockups I've got :-D

Actions #18

Updated by Boone Gorges almost 7 years ago

Whoops, cross posts.

We have to merge the FAQ's content into the Pages content and will do that ASAP.

OK, this sounds good.

Should I use tags to identify the FAQ pages?

A single 'FAQ' tag would be simplest. It doesn't easily allow us to specify the order of items, but maybe we can cross that bridge at a later date.

Actions #19

Updated by Stephen Real almost 7 years ago

As I work on merging the FAQ's with the Pages, I am finding that some of the FAQ content is just a brief overview with the link to a page that has the meat of the answer. Ideally, I would like to eliminate these "intermediate" pages. Example: if the FAQ, What are Digital Research Tools (DiRT) ? could link directly to this page: https://codex.commons.gc.cuny.edu/wp-admin/post.php?post=4875&action=edit instead of this page: https://codex.commons.gc.cuny.edu/frequently-asked-questions/digital-research-tools/

that would be better than maintaining two pages.

Actions #20

Updated by Matt Gold almost 7 years ago

Good point, Steve, but please check in with Scott, as there was likely a reason he set them up in that way

Actions #21

Updated by Stephen Real almost 7 years ago

I spoke with Scott on the phone and he agreed that dropping the intermediate page makes sense. He suggested that we create a page of hyperlinks. Each question on the page would simply be link to content that we already have a page for. Does this make sense? Is it feasible? Is there a better way?

Actions #22

Updated by Boone Gorges almost 7 years ago

A FAQ tag seems like it'd be easier to maintain than a manually curated page of links, but I leave it up to Scott and the team responsible for maintaining the content.

Actions #23

Updated by Stephen Real almost 7 years ago

OK, we will eliminate a lot of the confusion by merging the FAQ content with the Pages content and there will be only one set of categories to contend with and FAQ pages will be tagged FAQ.

Given that simplification, what I would like to see after I click a homepage box is a page with a scrollable list of all the pages that correspond to that set of categories. The order of the list can be alphabetical by page title or alphabetical within Category. As I have said before, I am agnostic about the appearance of the homepage boxes.

Looking at the site, I think we have room for a fifth box on the home page which is FAQ's, but we can also keep the same design and put all the FAQ's under the Quick Start heading at the bottom of the homepage. Can that list be scrollable or have a more... link at the bottom?

I hope this helps.

Actions #24

Updated by Boone Gorges almost 7 years ago

Steve - As discussed in today's meeting, I'll make the adjustments to account for the changes in IA. Can you let me know as soon as you or Scott have made the corresponding changes to the content at https://helptest.commons.gc.cuny.edu/wp-admin/? I imagine we can hone the content here, and then clone it back to help.commons.gc.cuny.edu or whatever the final destination is.

If the team has any visual design requests, please assemble them here soon, and I'll ask Dan to take care of them.

Actions #25

Updated by Matt Gold almost 7 years ago

Hi All -- this all sounds great, but I do hope we can work on the visuals of the page as well. Is anyone working on that?

I am also thinking that the search box should be a bit more prominent and perhaps a bit lower down on the page so that it doesn't look like part of the header.

Actions #26

Updated by Boone Gorges almost 7 years ago

I've implemented the structural changes in https://github.com/cuny-academic-commons/cac/commit/0b72176ef2541fda0850534d9f4d6c90119fcc4d and they're up on https://helptest.commons.gc.cuny.edu

Note that I'm pulling from the 'FAQ' tag for the front page. This seems to overlap with some content related to FAQ-generating plugins. Let me or Dan know if you decide to change the tag used for marking FAQs as such.

Ray, the Zendesk modal is not rendering properly. It's being displayed, but under the overlay, and at the bottom of the page (just above the sitewide footer). Could you please have a quick look to see if you can spot the problem? You'll probably be able to do in 5 minutes what'd take me 30.

Actions #27

Updated by Raymond Hoh almost 7 years ago

Ray, the Zendesk modal is not rendering properly. It's being displayed, but under the overlay, and at the bottom of the page (just above the sitewide footer). Could you please have a quick look to see if you can spot the problem? You'll probably be able to do in 5 minutes what'd take me 30.

Not a five-minute job I'm afraid.

It's due to the cac-help theme using Bootstrap, which has its own modal JS code that conflicts with the one we use on the Commons - jQuery SimpleModal. I'll see what we can do.

Actions #28

Updated by Boone Gorges almost 7 years ago

Shoot. Sorry, Ray. Thanks for your help.

Actions #29

Updated by Raymond Hoh almost 7 years ago

Help modal should be fixed for the cac-help theme in:
https://github.com/cuny-academic-commons/cac/compare/0b72176ef2...72ca231868

This is deployed on production. You might have to clear your browser cache for the modal to look correct.

Actions #30

Updated by Boone Gorges almost 7 years ago

My hero! Thanks, Ray.

Actions #31

Updated by Stephen Real almost 7 years ago

Boone,
The site is looking good. Scott and I will try to clean up the redundant FAQ content--hopefully over the weekend.

Actions #32

Updated by Daniel Jones almost 7 years ago

Hey all - I've pushed a couple of commits here: https://github.com/cuny-academic-commons/cac/commit/692e53b5927de80125b25bba8a2c3d3dd6fc0d88 and here: https://github.com/cuny-academic-commons/cac/commit/b9334bfe16aba8fc29f229ee5a3b763a0ec44769

I've done some styling for the home page, FAQ pages, and search pages, and the "Get Help" section on pages, as well as adding breadcrumbs and "Get Help" to the search pages.

For the homepage: I can continue to work on the 4 (5?) boxes, but wanted to hold off because it looks like right now there's a difference where the theme currently just shows the title, but the mockup shows the title of the section plus some content. Should I try to implement that, or hold off?

I could also use a little bit of direction on how we want to implement the "drop links" for longer content. Is it something we'd be willing to hard-code in the pages, with a given CSS class for the list of links, that I could just style, or do we want something more elaborate?

Actions #33

Updated by Matt Gold almost 7 years ago

Bump on my questions re design

Matt Gold wrote:

Hi All -- this all sounds great, but I do hope we can work on the visuals of the page as well. Is anyone working on that?

I am also thinking that the search box should be a bit more prominent and perhaps a bit lower down on the page so that it doesn't look like part of the header.

Actions #34

Updated by Stephen Real almost 7 years ago

Matt,
Paige should be in touch with you today (5/2) regarding the design.

Actions #35

Updated by Paige Dupont almost 7 years ago

Daniel Jones wrote:

For the homepage: I can continue to work on the 4 (5?) boxes, but wanted to hold off because it looks like right now there's a difference where the theme currently just shows the title, but the mockup shows the title of the section plus some content. Should I try to implement that, or hold off?

Hey Dan,

For the boxes just the title is necessary we decided to do away with the additional content in these boxes at Friday's meeting. For some styling, I stole the 4 boxes idea from Twitter (see screen shot). Continuing to steal from Twitter, I like the idea of each box having a brief sentence pertaining to the content that is housed within with a clickable "More" button at the bottom of each box. This may address some of Matt's design concerns but I deter to Stephen and he for final say. Stephen or Scott, would it be possible for one of you to write that single sentence if you think that's a good idea?

Actions #36

Updated by Matt Gold almost 7 years ago

I agree that it would be good for each box to have some brief statement of what can be found in that category

Actions #37

Updated by Stephen Real almost 7 years ago

I can write a descriptive sentence for each of the 4 boxes. Here is a draft...
Personalize My Commons: Basic help plus tips on customizing the Commons to meet your everyday needs.
Manage a Site: For Site owners, a wealth of information on customizing your site with Themes and Plugins to maximize your impact
Manage a Group: Group Administrators can fine tune their groups to improve productivity and enhance collaboration
Get Creative: Innovative ideas for putting the Commons to work for you in ways that you may not have realized were possible

Actions #38

Updated by Matt Gold almost 7 years ago

great start, Steve -- thanks. I might start with action words -- ie.

Personalize My Commons: Find tips on customizing the Commons to meet your everyday needs.
Manage a Site: Customize your Commons website with themes and plugins to maximize your impact
Manage a Group: Fine tune the groups you administer to improve productivity and enhance collaboration
Get Creative: Explore innovative ideas [for putting the Commons to work for you in ways that you may not have realized were possible]

I think that last one needs more work but I don't have time today to rewrite

Actions #39

Updated by Paige Dupont almost 7 years ago

Stephen Real wrote:

I can write a descriptive sentence for each of the 4 boxes. Here is a draft...
Personalize My Commons: Basic help plus tips on customizing the Commons to meet your everyday needs.
Manage a Site: For Site owners, a wealth of information on customizing your site with Themes and Plugins to maximize your impact
Manage a Group: Group Administrators can fine tune their groups to improve productivity and enhance collaboration
Get Creative: Innovative ideas for putting the Commons to work for you in ways that you may not have realized were possible

These are great Stephen! Here's my take just to shorten copy:

Personalize My Commons: Tailor the Commons to meet your needs.
Manage a Site: Customize your site with themes and plugins to maximize your impact
Manage a Group: Utilize Groups to enhance collaborative productivity.
Get Creative: Innovative ideas for putting the Commons to work for you.

Actions #40

Updated by Matt Gold almost 7 years ago

I like yours, Paige!

Actions #41

Updated by Stephen Real almost 7 years ago

I like yours, too, Paige. I would offer one tiny change--to include the word Administrator(s) in the Group Category. This category is really tailored for them rather than group members.

Actions #42

Updated by Margaret Galvan almost 7 years ago

WordPress link on generating a color scheme: https://codex.wordpress.org/Developing_a_Colour_Scheme

Actions #43

Updated by Matt Gold almost 7 years ago

Hi all -- relevant to our discussions here -- (this is a CUNY librarian writing about redesigning the homepage of the John Jay library website): https://emerging.commons.gc.cuny.edu/2017/05/to-scope-or-not-to-scope/

Actions #44

Updated by Matt Gold almost 7 years ago

(also, Paige and Stephen specifically -- please check that post out)

Actions #45

Updated by Stephen Real almost 7 years ago

Good post, Matt. I agree that Search is the centerpiece and should be the most important visual element.

Actions #46

Updated by Stephen Real almost 7 years ago

Final text for the 4 boxes:

Personalize My Commons: Tailor the Commons to meet your needs.
Manage a Site: Customize your site with themes and plugins to maximize your impact
Manage a Group: Administer groups to optimize collaborative productivity.
Get Creative: Innovative ideas for putting the Commons to work for you.

Actions #47

Updated by Daniel Jones almost 7 years ago

Hello all - here's a commit with some further changes, based on some mockups that Paige sent around via email: https://github.com/cuny-academic-commons/cac/commit/7e220ea8dd26fec36f9daad6788c72eed3915e82

Please let me know if this looks good!

Actions #48

Updated by Boone Gorges almost 7 years ago

Thanks, Dan!

All - Changes have been pulled to helptest.commons.gc.cuny.edu. Be sure to do a hard refresh (clear browser cache, or Shift + Refresh).

Actions #49

Updated by Matt Gold almost 7 years ago

Looks awesome -- thank you! I've tested responsiveness, too, on my laptop by resizing the browser window and it looks good, though if someone could test on a phone I would appreciate it.

thanks so much -- looking great!!!

Actions #50

Updated by Paige Dupont almost 7 years ago

Matt Gold wrote:

Looks awesome -- thank you! I've tested responsiveness, too, on my laptop by resizing the browser window and it looks good, though if someone could test on a phone I would appreciate it.

thanks so much -- looking great!!!

It looks great on mobile Dan!

Actions #51

Updated by Luke Waltzer almost 7 years ago

Looking really good! Thanks Paige and Dan!!!!

We had a conversation on the call today about the "Getting Started" blade... we're thinking we should change the text there to "Common Commons Questions" since the links to the right are pulled from the FAQs, and are not necessarily intended for n00b users.

Also-- thoughts about styling the links in that area in white, perhaps bold, to make them pop off the background a bit? The black on the light blue looks a little meh.

Actions #52

Updated by Matt Gold almost 7 years ago

Luke Waltzer wrote:

Also-- thoughts about styling the links in that area in white, perhaps bold, to make them pop off the background a bit? The black on the light blue looks a little meh.

Let's play around with it. The blue background there is pretty light, so there might not be enough contrast, but let's try it and see. I agree about the black on light blue looking a bit meh

Actions #53

Updated by Daniel Jones almost 7 years ago

I've attached a couple of screenshots. One shows how the FAQ text looks with white text, the other with a dark blue. I think the white is far too low-contrast. The dark blue isn't awesome, but I think it's better than the black.

Once we settle on a color, I can make that change and also the text change and push them to GitHub.

Actions #54

Updated by Luke Waltzer almost 7 years ago

Thanks Dan. I agree the blue is the best of the three.

Actions #55

Updated by Matt Gold almost 7 years ago

agreed on the dark blue. thanks, Dan and Luke

Actions #56

Updated by Daniel Jones almost 7 years ago

Actions #57

Updated by Boone Gorges almost 7 years ago

Thanks, Dan. Those changes have been deployed.

Actions #58

Updated by Boone Gorges almost 7 years ago

Steve and others - Can you let me know what should happen with the existing and test sites at the 1.11 launch? We have three sites:

1. codex
2. help
3. helptest

I assume that helptest should have its URL changed to help.commons.gc.cuny.edu, and the current help should be retired. Does this change anything in our navigation?

Actions #59

Updated by Stephen Real almost 7 years ago

Boone,
I would like to get Scott's input on this, but my answer is that yes, we change help test to help, remove the old help and remove codex. The Help link at the top right of every page should take us to the new help page. I will have to look to see if there is other navigation that needs to change, but my default answer is that all Help links should get us to the new Help page. The FAQ's are still showing up weirdly on help test. I think that may be because Scott changed the tags on Help, but not Helptest. I have been operating on the assumption that they are pointing to the same content database, but maybe not.

Actions #60

Updated by Stephen Real almost 7 years ago

Following up on my last post, the dropdown menu that opens when you click "CUNY Academic Commons" has a Help link, which should take you to the new help page. Current behavior is that it opens a sub-menu with several choices--that should no longer happen.

Actions #61

Updated by Boone Gorges almost 7 years ago

Thanks, Steve. I'll wait until we get confirmation from Scott on the URL specifics and the elimination of the Help subnav in the top-left dropdown before I make the changes in the codebase, but this sounds like it's probably close to a complete list of interface pieces that need swapping.

Actions #62

Updated by Stephen Real almost 7 years ago

Is there a container for a non-developer to maintain Intro text on the landing pages for each of the four homepage boxes? See attached screenshot for exact text. If there is no direct way for a non-developer to edit the text, please update the text for initial launch to say "Welcome to ..." followed by the display text of the link that got you there.

Actions #63

Updated by Stephen Real almost 7 years ago

In checking the links on the pages, I noticed that a number of topics are missing from our boxes. This one for instance: https://helptest.commons.gc.cuny.edu/groups/group-docs/
is in the category Commons Groups, which should map to both Manage a Group and Personalize My Commons. What is the best way to fix this? I can update the categories for the missing pages or we can modify the code.

AS OF 10:53 THIS MORNING, I HAVE REVIEWED AND UPDATED PAGE CATEGORIES, SO THAT THIS CAN BE PUNTED ON THE CODE SIDE FOR NOW

Actions #64

Updated by Stephen Real almost 7 years ago

What options do we have, if any, for controlling how the page links sort on the Category Results Lists the user sees after clicking one of the 4 home page boxes. I will add a screenshot of the content I am asking about.

Actions #65

Updated by Boone Gorges almost 7 years ago

Is there a container for a non-developer to maintain Intro text on the landing pages for each of the four homepage boxes? See attached screenshot for exact text. If there is no direct way for a non-developer to edit the text, please update the text for initial launch to say "Welcome to ..." followed by the display text of the link that got you there.

You can modify this text. See the "category page" discussion here https://redmine.gc.cuny.edu/issues/6301#note-14. The links are:
https://helptest.commons.gc.cuny.edu/wp-admin/post.php?post=6336&action=edit
https://helptest.commons.gc.cuny.edu/wp-admin/post.php?post=6339&action=edit
https://helptest.commons.gc.cuny.edu/wp-admin/post.php?post=6341&action=edit
https://helptest.commons.gc.cuny.edu/wp-admin/post.php?post=6343&action=edit

In checking the links on the pages, I noticed that a number of topics are missing from our boxes. This one for instance: https://helptest.commons.gc.cuny.edu/groups/group-docs/

is in the category Commons Groups, which should map to both Manage a Group and Personalize My Commons. What is the best way to fix this? I can update the categories for the missing pages or we can modify the code.

Mapping of page categories to "category pages" is as described in https://redmine.gc.cuny.edu/issues/6301#note-11. This can be easily changed. Please provide me with an updated map (or edit the one in note-11) and I'll take care of it.

What options do we have, if any, for controlling how the page links sort on the Category Results Lists the user sees after clicking one of the 4 home page boxes. I will add a screenshot of the content I am asking about.

I can make certain modifications. You don't specify, but I'm assuming you don't like that the sort order is respecting the quotation mark? If you can provide details, I can have a look to see what's possible.

Actions #66

Updated by Stephen Real almost 7 years ago

I fixed the mapping by updating the categories of the content--a solution that surfaces all the content and is workable for now. Fixing the mapping logic will involve some compound logic that I am loath to specify and implement on the run.

The alphabetical sort order is acceptable. Changing it is a low priority, but as a future enhancement, it might be helpful to sort or group by category. For example Manage a Site has many pages on Site Plugins and many on Site Themes. It would be helpful to the user to group pages accordingly in the list, but that would also require headings. Personalize My Commons may benefit from a similar approach.

I will update the intro text on the pages you identified, Boone.

Actions #67

Updated by Boone Gorges almost 7 years ago

  • Status changed from New to Resolved

The new help site is live at https://help.commons.gc.cuny.edu. Let's address ongoing issues in new Redmine tickets.

Thanks for your hard work and collaboration on this task, everyone!

Actions

Also available in: Atom PDF