Themes

After having purchased Balsamiq I’ve apparently gone totally wireframe crazy… So here’s a take on the themes page.

Design Goals

  • Abstract away the concept of “Installed” versus “Uninstalled”
  • Get rid of the concept of filters
  • Make the themes you want access to the most accessible.

 

Inspiration

  • Netflix
  • The App Store

So here’s the landing page:

Themes Home

You have the theme you’re currently sporting at the top so you know where you are. Tucked in the top right corner are Upload and Search. The majority of the page is taken up with a netflix-like series of categories.

  • The top category, “Recently Viewed” is a chronological list of all Themes you’ve ever looked at or installed.
  • The next is Popular
  • Then New
  • Then some autogenerated categories based on what types of Themes you’ve looked at (from the Recently Viewed section). So if you look at a lot of three column themes, you get a category full of three column themes. The more detailed the tagging of themes, the better this will work.

On Hover

 

When you hover over a theme you get two choices, More Info, and the impulsive “Switch to Theme”. If you’re looking for a new theme chances are you’ll go with More Info. If you have been looking at a couple different Themes trying to decide between them and finally came to your decision, you might hit Switch to Theme right on the main page.

Note that Switch to Theme doesn’t care whether the theme is installed or not. It totally abstracts away that concept. Click Switch to Theme and the theme installs AND switches.

Modal Info Box

 

More Info, rather than taking you to a different page like the current preview, takes you to a modal with a slider where the themes get to show off their different aspects. At the bottom are buttons for close (you can also just click outside of the modal), Preview (which opens a live preview in another window), and Switch to Theme.

Again, Switch to Theme doesn’t care whether it’s installed or not.

Preview

 

Preview takes the user to another window with their content in the new Theme. Choices are Close or Switch to Theme.

Recently Viewed

 

Any time you look at a theme it goes in your Recently Viewed Themes. That means if you click on More Info and go to the Modal Info box, that Theme is now in Recently Viewed.

Upload a Theme

Click Upload a Theme in the top right corner and you’re taken to a modal that is the same size and positioning as the Info Box Modal. You can upload .zip files here. Preview and Switch to Theme are disabled until the zip loads.

Upload Progress

 

No more ugly lists of files on Theme Upload. Instead you get a visual progress indicator.

Uploaded Info Box

 

And when it’s done loading, surprise, surprise, you have the standard Info Box Modal.

Uploaded in Recently Viewed

Uploaded Themes are treated just like wp.com themes for the purpose of placing them in your Recently Viewed Themes.

Search Drop Down

 

Type a search term into the top right and you get a drop down of themes.

Search Bump Out

 

Hover over the search results and you get a bump out with a one-picture preview of the theme. Click on the search results or the preview window and it takes you to the Info Box.

———————-

But what about people who have so little space on their hosting that it’s worth their time to delete old themes? If you abstract away the concept of installation, themes will just keep piling up in people’s installs, right?

Firstly I think that that is unlikely. At this point the amount of space taken up by a theme is so miniscule and its impact on performance and storage so minute that I don’t see any reason to ask people to manage the deletion of old installs. Let them keep piling up. Who cares. The number of people who will have a significant number of themes pile up in their installs will be pretty small, so essentially I think it’s a non-issue. Additionally, since they’ll always be able to access wp.com Themes, the system could autodelete any wp.com themes after say 10 and the user would be none the wiser.

For power users who simply demand that level of OCD control you could add the ability to option(alt) click on the Theme in Recently Viewed Themes to delete it from your install.

————————

Why modal instead of a new page?

Because I like it? And because it makes the Themes area a single page. Much cleaner and simpler. It also follows an “App Store” UI that should be familiar to most.

Advertisements

Illustration not Building

 

 

 

 

 

 

 

Here’s another take on Content Blocks. This basic idea envisions Content blocks as Inserts into a post rather than the building blocks of a post. This seems a lot closer to how people create blogs, which is to say, they have some content and then they use images, maps, tables, charts, block quotes, etc. to illustrate that text.

Start a new post and you have a single edit surface with all the formatting and Content Blocks along the top along with an extra large “Publish” button.

New Post Single Page

 

At the bottom you have layout choices and it defaults to a single page. Since the scheduling and other advanced options are… well, advanced… they get hidden in a drop down where novices don’t have to see them.

Publish Dropdown

 

To change the layout you click on one of the layouts which is displayed visually below the edit surface.

Two Column

 

The lines delineating the layout are grey rather than black to indicate that it’s all part of one page.

Two Columns and Footer

And it includes the ability to have both simple column layouts and more complex column + footer layouts. I imagine that this would be something that the theme would control – some themes, for simplicity sake turning off the function totally and only allowing single page posts.

Rather than introducing a new UI concept – the circle with a plus in it – for Content Block insertion, both Content Blocks and text simply insert at the cursor.

Cursor

 

And text looses focus in the areas you’re not editing, allowing you to focus down on one section at a time.

Text Focus

 

Content Blocks default on insertion to the full width of a given section.

Content Block Default

 

Content Blocks also “snap” to sections when moved.

Content Block Snap

 

However, and this is an important difference between this concept and Mel’s – Content Blocks do NOT live on the same layer as text. They are inserts that all act exactly like images do currently – that is to say that they push them out of the way. And since Content Blocks don’t live on the same layer as text, they can span columns like so:

Content  Block Drag and Drop

 

This allows for things like block quotes across columns which is a decently common layout.

While text is NOT all Content Blocks like in Mel’s mockup, it can behave like a content block for the purposes of dragging and dropping.

Drag and Drop Text

 

A few final thoughts:

  • While I’m all for simplifying, I’m not a fan at all of the context sensitive floating format bar. I strongly prefer all the formatting and Content Block insertion options to be visible at all times and in a constant location.
  • I think the idea of “everything is a content block including text” is interesting in theory. But in practice it doesn’t jive with the way I go about making posts. Posts aren’t a random collection of paragraphs that can be reordered for emphasis. They are stories with a beginning, middle and end. Moving whole paragraphs of text around is much, much rarer than shifting around a photo trying to find the best place for it, or adding a chart or a block quote.
  • Text Boxes (such as Code, Quote, Tweet) etc. are fundamentally different than other Content Blocks because whenever the user sees text he or she will expect to be able to use the formatting palette on it. To me, those Text Box type Content Blocks should be associated more with the formatting bar rather than the rest of the content blocks.
  • If we’re going to allow for changing layout mid post, we will need clear, common sense rules about how text and Content Blocks reflow. This is going to be a thorny thorny problem.
    • Along with that, there’s a difference between having a post of two independent columns, and a post of two columns where text wraps from the end of the first column up to the top of the next. Also thorny.

 

Featured Content as a Widget or Content Block

This is in response to the initial “Featured Content” proposal here: http://make.wordpress.org/core/2013/08/19/featured-content-getting-started/

It strikes me that there is a four step process for featured content:

1) Identify the post or page you want to highlight and mark it in a way that unambiguously tells the system WHERE you want it to to be highlighted (may be multiple places).

2) CHOSE THE CONTENT you want to use to highlight the post. This may be automatic – use the featured image and automatically generated excerpt – or a manual process where you tailor the presentation specifically to the place it will be displayed.

3) FORMAT that content. You’ve decided you want to use a certain photo and block of text, Now how big do you want the photo? Do you want the text overlaid on the photo or on the side, etc. etc.

4) SCHEDULE when you want the highlight to appear.

——–

Where you want it to go?

There are three ways you can go about this: push, pull, and matchmaker

In a push system, you go to the post and “push” it to a specific place to be highlighted. In a pull system you go to the place where it will be highlighted and there is a UI there to choose which posts you want to appear there. In a matchmaker system there is a UI that displays both areas and posts and allows the user to connect the two.

A fourth related system is an automatic system, which pulls posts to a highlight area based on existing (or newly added) meta-data. For example one can imagine a Featured Content area that simply took the newest post, the newest few posts in a particular category or the newest few posts with a given tag.

What content do you want to use for the highlight?

WordPress has an existing system for highlights – the featured image and excerpt. But you might want more granular control than that. You might want to write up a specific pithy excerpt for a feature blogroll in the sidebar of your homepage. Or, you might be highlighting a post as the main attraction on your blog for that week and you want to not just have one featured image, but an entire gallery. Since you may wish to highlight a given post in multiple locations, there may be multiple different excerpts/media for different purposes.

Similar to the choice of where, the UI for what you want to use as content for the highlight can exist in multiple places. You could have on the post page itself a UI for selecting or creating content specific to each area where it will be highlighted. You could also have a UI at the location of the highlight.

How do you want that content to look at the highlight location?

What you want to display and how you want to display it are separate concepts. You might want to highlight these 5 images from a post on the front page where the norm is to use a slider. Those same 5 images in the “pictures of the day gallery” page should be a thumbnails gallery. The display could either be automatic at the theme level, or available to the user. If available to the user, it is likely that the UI would be located at the highlight location rather than the post or some third location (like the matchmaker).

When do you want this to go live?

Not much to say here except that it can be automatic, chosen from the post, chosen from the highlight location, or chosen at a matchmaker location.

————————————

I’m going to start from the assumption that adding a new high level concept and associated UI adds cognitive load and makes WordPress harder to navigate, so if possible we want to minimize the number of high level ideas in WP. With that as a starting point the question becomes, what of the above is possible using widgets content blocks?

  • UI for choosing where a post goes from the post page: Could piggy-back on the taxonomy system = check
  • UI at the highlight area for choosing which posts to pull to that area: Basic widget UI = check
  • UI for matchmaking from a third location: Unpossible
  • UI for automating which posts to pull into a given highlight area: Widgets do this but there is no standard UI = 1/2 check
  • UI for creating/choosing different excerpts and media for each highlight location: Can’t be done on the post page, could be done in the widget = 1/2 check
  • UI for choosing the display layout and formatting: Can be done from the widget = check
  • UI for scheduling = Can be done in the widget, but not at the post page = 1/2 check

Personally I don’t think that the matchmaking UI being unpossible is a really big loss. Having three separate areas to connect posts to highlight locations seems unnecessarily complicated. A combination of push and pull makes the most sense to me.

——————————–

Which brings me to my suggestion for addressing the 1/2 checks –  2 things that would improve WP and allow us to use content blocks for featured content rather than creating an entirely new high level concept:

Standard Filter UI

Creating a standard filter service for widgets and plugins would be a really big win for WP. A widget could say, “I’m a blog-roll that displays everything that is passed to me in supa-dupa cool looking format”. The core service would let the user say, “I want to pass to this widget every post authored by Joe in the last 6 months that is tagged ‘malaria’.” For galleries it would make creating automatic galleries trivial, “Create a gallery of all images in posts written by Joe in the last 2 weeks.”

For all authors of plugins and widgets that do filtering like this, have a canonical core UI would save UI design time, and make their plugins easier to understand from the point of view of their users.

For the purpose of Featured Content, having an easy way of automating what posts are pulled into a given highlight location opens the door to using the existing taxonomy system to mark posts as featured.

Robust Excerpting System with Standard presets

When you create a post, the system currently creates 1 excerpt and has a featured image. What’s really nice about this is that when you change themes, these don’t change. But with content potentially being featured in multiple places, one excerpt isn’t enough. You need to have multiple excerpts and there’s no current system for retaining information on the multiple presets with a change of theme.

What’s needed is a few semantic categories of preset that are universally understood by all themes. Here’s a suggested list:

  • Short Excerpt – the current excerpt
  • Long-Form Excerpt – auto-generated to twice the length of a current excerpt
  • Snippet Excerpt – One line

Similarly it would be nice to have some basic image presets in addition to just the featured image

  • Featured Banner – A wide aspect ration crop of the featured image (or another image from the post)
  • Featured Thumbnail – Sometimes the image used at large size is too detailed and wouldn’t be appropriate for, say highlighting the post in a sidebar.
  • Featured Gallery – 5 images from a post. Defaults to the featured image plus the next 4. Can be edited by the user.

Based on comments in the featured comment blog post, it seems like you might also want some presets for “Title as featured on the Home Page”, “Title as featured in a sidebar”, etc.

Key features here would be that all the various presets could be autogenerated. All the autogenerated choices could be overwritten by the user. And themes could hide the UI for overwriting the choices, or selectively show only some of them to make it simpler for the user.

Having semantically different excerpts ensures that if one theme puts long form featured content in the center of the home page, and another likes to lead with snippets and put long form articles beneath the fold, changing themes is still not a problem.

Now if a theme, for whatever reason, wanted to declare a custom excerpt they would be free to do that, but tread carefully because that means that the user will not be able easily switch themes.

Ability for Plugins and Widgets to place conditions on Taxonomies

If a featured content slider on the front page is pulling from say the “Hot Off the Press” category or tag or supa-dupa-elite-taxonomy. It’s really important that authors not assign a post to that taxonomy without declaring a featured image.  There aught to be a simple way to declare that a given taxonomy cannot be chosen without meeting certain conditions. It would be obviously useful for featured images, but one can imagine having a conditional trigger to a modal dialogue being useful for presenting UI for editing needed excerpts. For example if you categorize a post as “Featured” and hit Save, it could pop up a modal that says, “This post will be featured on the front page. Please edit the excerpt of your post that will appear there.”

———————

The key to this proposal is that the three ideas above together enable great featured content, but have applicability that is much wider than just “featured content”.  An easy to use core filter system would be a boon to many widget and plugin developers. Conditions on taxonomies (and triggers) allows for much richer use of that system. And automation of multiple types of standard excerpts takes “featured” out of the realm of highly manual task that is done with a small subset of all posts and into the realm of rich associated meta-data that can be sliced and diced by plugins and widgets in many ways.

Content Blocks

This is in response to Mel’s mockup of a new WordPress editing based on “content blocks and content formatting”. There are a couple of issues I have have with that mockup here: http://melchoyce.com/wpadmin-ui/content-editing.html

1) It hides extremely common functionality like bolding, underlines, etc. in a highlight hover.

2) In order to allow for insertion of the content blocks she creates a hit target that is a) replaces the cursor when you stop typing  b) isn’t clear (does a little circle with a plus say “insert media” to you? and c) hides all visual indication that the various insertable blocks exist – if I didn’t know that “forms” or “quotes” were a possible choice it would be non-obvious.

3) You’re still dealing with multiple edit surfaces for things like inserting FB Like bottons and similar plugin-driven elements into your page.

————————————–

So I started from this premise – what is the most common editing that the user is likely to do? What does that UI look like? How can that be adapted and further simplified so it’s not just simple, it’s familiar.

From that came a few design considerations:

1) A single edit surface. All changes to the post should be visible on that edit surface.

Obviously since the theme may (should) be responsive, the intention isn’t to create a WYSIWYG, but everything that will appear in the post should have some visual indication on the singular edit surface.

2) All the things that you want to do to that edit surface should be in one easy to navigate toolbar at the top.

3) Insertions always happen at the cursor (just like in a document editor)

New Post

Here you have a new post. Rather than announce that you’re editing a new post by having the heading “New Post” above the edit surface, you simply have placeholder text in the title. Saves space, equally clear.

Titled Post

Just as you imagine would happen, click on the “Untitled” and start typing and it overwrites, also creating the new permalink.

Lorum Ipsum

Click in the body of the text and you start writing. When you’re writing in the body of the post, the header and permalink is greyed out. Again this is common behavior from most word processors. Note the grey bars that separate the header from the body from the footer. They’re not full separation so the user still sees it as one unified edit surface even though there are three sections.

Media

Click Insert Media, and you get a dropdown with various types of media that you can insert at the cursor. Plugins are free to populate this dropdown. If you have a plugin that does crazy 3-d models, that can appear as a choice in the insert media dropdown. Next to it you have Social Media and Comments. In that dropdown you can chose to put a comment area in your post, put in FB like buttons, Twitter, etc. Again it is plugin-loving, so your various plugins can put their own icons there.

Other

The high level categories really don’t matter to the meat of this idea. It could be “Media”, “Social Media” “Other” or you could have a specific dropdown for “Interactivity”, or “Tables” or whatever. For the purpose of this mockup I threw Forms and Maps in “Other”.

Publish

Lastly there’s the publish area. The button with the vertical bar and an arrow after it is a pretty commonly understood UI element. Click the left side where it says “Publish” and the post gets published automatically. Click the down arrow to the right and you get options in a drop down.

—————-

Yes this mockup is missing a bunch of stuff. Yes the typography will make your eyes bleed. It’s an illustration of a concept, and I’m not that great with Pixelmator yet… Comments welcome.

Teta village

Teta Village Malaria Day

[hsmap name=”countryprofiles”]

Michael Lessmeier is a rural education volunteer in Central province of Zambia teaching English at Teta Basic School for students in Grades 8 and 9.  Michael observed a high absentee rate of students caused by malaria and decided to work with the community to address this issue.

PCV Michael Lessmeier distributed nets to his community.

First,  Michael met with the local village leader,  Mr. Davis, who is addressed as the headman.  Mr. Davis instructed the neighbor health committee (NHC) volunteers  to complete a census to determine the number of households and bed spaces. Data from the census concluded that many households did not have enough nets for the sleeping spaces.  Michael also surveyed  550 students in grades 3 to 9  and found less than 10% had slept under a bednet  the previous night.

Alarmed by this information, the headman, clinic staff and neighborhood health committee (NHC) members gathered in October to determine the best course of action. They recognized the need not only for more bednets but more education on malaria and prevention. To begin this process Michael submitted a Small Project Assistance grant (SPA) to purchase the 500 nets needed for the village.  Then he worked with NHC members and teachers at Teta school to develop a malaria program.

On November 15th, Michael conducted a workshop  for eight  NHC volunteers on how malaria is transmitted, signs and symptoms, prevention methods and ways to repair a bednet.  One of the teachers from the school assisted in translating the information. The purpose of this training was to have these volunteers teach this information at antenatal clinics and under five clinics.

NHC members demonstrating net repairs.

On November 16th, Teta Malaria Day was held at the health post facility near the school.  Each household in the village was eligible to receive a bednet, and an adult member of the household had to attend the malaria information program in order to receive the net.  The training information was provided in four stations:  transmission, signs and symptoms, prevention and how to properly hang the net. A station for net repair was done by NHC members. A teacher from Teta School conducted these 10 minute sessions in Bemba, the local language.  These information sessions were conducted in groups of 25 people.

When all the information sessions were completed, the nets were distributed to each household member from the census.  The package of each net was opened and given to the household member and an information brochure on malaria was included with each net.

Two members of the neighborhood health committee are also trained in maternal and child care, and affiliated with the  Safe Motherhood Action Group (SMAG) assisted in the day’s events.  These members  conducted brief talks on the importance of attending antenatal and the benefits to for the mother and baby.  Michael also had assistance from other PCVs, Andrew Bernhard, Courtney Gandy and Jennifer Parks in distribution, health information and bed net repairs.

The Teta Village Malaria Day was a great success with 500  families receiving much needed bednets and malaria prevention information.  Mr. Davis, the village headman, said he was “very grateful to Michael and Peace Corps” for helping with malaria prevention.

Health Volunteers Stomp It Out at IST

This October in the town of Musanze, in the shadows of Rwanda’s volcanoes (pictured above), 21 health volunteers participated in a ten-day in-service training and counterpart workshop. These volunteers, nicknamed Health 4, are currently living in 11 of Rwanda’s 30 districts, working closely with health center staff to address the needs of their communities.

The group had a specific request for their malaria training at IST: to learn more about the global malaria burden, malaria in Rwanda, and specific ways PCVs can get involved with malaria outreach in their communities. Rwanda’s malaria volunteers developed a presentation addressing these topics, including an introduction to the many resources available to PCVs through Stomping Out Malaria in Africa and the malaria messages being promoted by the Ministry of Health and the National Malaria Control Program.

In addition to these topics, we covered the basics of what Peace Corps Volunteers need to know about the science and history of malaria. Using the Focus In Train Up Curriculum, we introduced the volunteers to transmission, effects, response, diagnosis, treatment, and prevention, and facilitated a discussion of what PCV communities should understand about malaria.

The IST covered a wide variety of other health topics, including family planning, workplace integration, nutrition, adult learning, and cooperatives. At the end of IST, the volunteers were joined by 38 selected health center counterparts for a three day workshop on behavior change communications and project design and management. We malaria volunteers helped facilitate these workshops, helping the PCV-counterpart teams to develop project and activity plans.

The PCVs were well prepared for this IST. During their first three months at site, they conducted Community Health Assessments to learn more about health practices in their communities, from the prevalence of malnutrition to the availability of HIV/AIDS testing and counseling services. As part of this assessment, the PCVs learned more about malaria practices at their sites, including availability of malaria testing and treatments and insecticide-treated nets; the history of IRS sprayings; net usage and care practices; and community perceptions of malaria.

In our discussions, we learned that several PCVs had seen IRS sprayings at their sites. One mentioned a stock of nets at her health center waiting for the next universal coverage campaign. Another is planning to incorporate malaria lessons into her health club as one of her first activities. We hope that this IST gave the PCVs the knowledge and the materials necessary to begin implementing malaria projects at their sites. We are looking forward to seeing the good work they will do, and hope we can continue to assist them.

Malaria Think Tank Springs Into Action

Last week the newly formed Peace Corps Uganda Malaria Think Tank held its first meeting! Comprising the Think Tank are Malaria Team members Matt Boddie and Ashley Givan, as well as Community Health Volunteers Sarah Cornett, Kristina Sandfoss, and Chris Peterson.  The Think Tank had the opportunity to sit down with Country Director, Loucine Hayes;  Director of Programming and Training, Paul Sully; and Health Program Specialist, Cotious Tukashaba, to form a strategy that will engage Peace Corps Volunteers in all sectors to fight against malaria.

Capitalizing on the strength and innovation of other Volunteer groups within Peace Corps  Uganda, the Malaria Think Tank will collaborate with the Water and Sanitation for Health, Micro-finance, and Agricultural Think Tanks to exchange information, resources, and plan cross-cutting projects together.  The Think Tank will also work closely with the Technology Committee to make information more readily available to all Volunteers through the Peace Corps Uganda website.

Potential projects of the Malaria Think Tank include: regional malaria trainings, conducting a survey on net use and care at the household level, using Village Savings and Loans Associations as a platform for malaria education, utilizing mobile clinics to deliver education on nets, teaching tailors how to embroider decorative patterns onto nets, carrying out a study on how subsidized nets are adopted in a community, and researching treatment and pesticide resistance at a national level.

The Malaria Think Tank will meet again in January. However, members already communicate on a daily basis. They are enthusiastic about forming partnerships with civil society organizations, local governments, and international organizations.  But most importantly, they are very dedicated to ending malaria in Uganda through its best resource: Peace Corps Volunteers.