Learning patterns/Designing portals on wikis

A learning pattern forwiki design

Learning Pattern Library

Designing portals on wikis

problemYou want to organize information in the form of a portal

solutionUse standard designs that work on different devices and different screen resolutions and archive old pages.

creator• Harej (WMF)• MCruz (WMF)

created on29 June, 2017

status:draft

Starting September 2016, we carried out user experience research to understand how Wikimedians learn online, how they connect to others, and what resources and user interface can best support these tasks.

What problem does this solve?

Many different teams use portals to communicate their work and reach out to the broader online community. Over the years, several different approaches to portal design have been taken, leading to inconsistency and poor maintainability.

What is the solution?

• Use standard templates where possible. Portals should have a consistent look and feel. Relevant templates:
  • {{Portal navigation}} – standardized header navigation for portals
  • {{Responsive two-column}} – a template for two-column pages with one "main" column for main page contents and an "additional" column for supplementary content. In left-to-right (LTR) languages, this corresponds to the left and right "rails" respectively. See it in use here: Wikimedia Resource Center, Learning and Evaluation.
  • In lieu of dense lists of links, consider using the {{stackable card}} template to arrange your content.
• Remember that English is not the only language. Your portal should be usable regardless of language – this includes support for right-to-left (RTL) languages. Adding translation tags to your portal can make your page translatable into multiple languages.
• Don't "work against" the wiki. Cleaner, more usable setups are fairly plain and straightforward, are easier to maintain in the long term, and pose fewer challenges for content translators. Stick as close to plain wikitext as possible; avoid overly complicated HTML setups.
• Make sure your design works at different screen widths. It should look good, or at least acceptable, on a large monitor, a small laptop screen, a tablet, and a smart phone.
  • For this reason (and many others), don't use tables for layouts.
• Make your content easier to find!
  • Consider adding it to the Wikimedia Resource Center as a resource.
  • Use categories. Categories play a big role in finding resources on Wikimedia platforms . When creating your portal, consider adding it to the Wikimedia resources category or its subcategories. You should also create a categorization system that is descriptive of the content you are sharing. For example, for the Learning and Evaluation portal, the main category groups a series of subcategories, like Evaluation portal templates, Learning and Evaluation: Start, Learning and Evaluation: Plan, Learning and Evaluation: Report, etc, which, in turn, can have other subcategories as well.

Steps to creating or updating a portal

• Who is your audience? Who are you creating this portal for? When someone visits this portal, what should they be able to learn or accomplish?
• What is in scope for your portal? Avoid scoping the portal around a specific Wikimedia Foundation team, as teams can change and needing to change the portal's name every time this happens is an unnecessary maintenance burden. Rather, it may make sense to organize around a specific topic or function.
• Review existing contents. A database query is useful here. As an example, see this list of Learning and Evaluation portal pages, which filters out archived pages (i.e. any subpage of Learning and Evaluation/Archive) and translation subpages such as Learning and Evaluation/ar. Using Quarry, you can "fork" the query and write your own.
• Archive old pages, rather than delete. Having a historical record is valuable. As an example, see Learning and Evaluation/Archive. As a bonus, you could actively curate the archives to portray a narrative of the portal's history.
• Your navigation flow. Figure out a logical navigation system based on a segmentation of content that makes the most sense for your users. We have identified a few criteria for grouping your content:
  • Based on steps in a process. For the Learning and Evaluation portal, we divided resources into steps based on three different things our audience—program organizers—might do: plan a program, report on it, and contribute lessons learned to the broader community.
  • Based on audience groups. For the Wikimedia Resource Center, we organized the content based on the audiences we are targeting for that portal: contributors, developers, program coordinators, and affiliate organizers. Alternatively, the Wikimedia Foundation's grants portal divides resources by audience as well: grants for individuals, and grants for organizations. Within each grant program (for example, Project grants, in turn, there is a sub-navigation based on a process.
  • Based on the function the resource will fulfill. The Communications resource center groups resources according to different communication goals: storytelling and messaging, press relations, design and branding, social media, capacity building, etc.

In essence, consider what is the differentiating factors that make your resources singular. This will help you bring forward a specific criteria to create a navigation that works for your portal.

If you are re-designing an existing portal, consider if it is well served by its current approach to navigation between pages. It is possible that what made sense at one point in the portal's history no longer does. Once you figure out how you want your pages to be structured, create a navigation template based on {{portal navigation}}. See {{Learning and Evaluation portal navigation}} as an example of a navigation template derived from the main portal navigation template. See also Template:Portal navigation/doc to see how this template works.

• Update the pages. Work through each page and make sure the content is up to date. Also add your new navigation header.
• Update documentation. If you have not already, create a page documenting your portal's technical setup on a /Documentation subpage. See Wikimedia Resource Center/Documentation and Learning and Evaluation/Portal documentation as examples. Documentation pages should list applicable templates, Lua modules, bots, gadgets, and other relevant components.
• Circulate for review. Once you have implemented all of the changes, check with your audience and ask for feedback from them. Compile their feedback and summarize issues that are raised. This feedback could serve as the basis for future iterations of your portal.

Related patterns

• Writing durable documentation
• Using Aggregate Groups to group pages for translation