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.

 

Magoye Village STOMPS out malaria

It may have not happened on World Malaria Day, but this past July when Mazabuka District Health Office dropped off 7,500 ITN’s,  Magoye village (population 18,000) was determined and ready to STOMP out Malaria in Southern Province.  Peace Corps Health Volunteer Nia Cheers, worked with her clinic on malaria  education and distributing bed nets.

The entire project was constructed under Magoye’s Rural Health Center Environmental Health Technologist  Bwalya Musiska.  The guidelines were simple.  A mass community assessment for data collection was to be done by community health workers and volunteers, new ITN’s were given to those who did not have a net or were replaced by old ITN’s that had tears or holes, and each sleeping space was accounted for was to receive a new ITN.

Magoye Village

A CHW conducting a census for bed net distribution

A one day community workshop was held back in June to help provide education and information about the distribution process and ensure that the guidelines were successfully met. The distribution process included having the volunteers open the package, handing it to the household member,  who brought the net home, then returned the empty package to the clinic.  CHW’s also had door to door campaigns and assisted hanging the nets in the homes. The workshop also provided correct education on Malaria, dispelling any myths or incorrect information about the disease.

I had the opportunity to follow two community health workers during the mass ITN distribution in Magoye village.  Ms. Beatrice Chimandha, a neighborhood watch volunteer who participated in distributing ITN’s for the first time said that she was excited to be a part of such a powerful movement,  “Malaria is a major killer in Zambia and it’s important to do what we can to help prevent ourselves from the disease.  Sleeping under ITN’s will help do that”.   Ms. Beatrice helped distribute a total of 97 ITN’s over a period of three weeks.

Lawerence Mainza, Vice Chair Person of Magoye Center NHC was another influential person in helping distribute ITN’s.  He attended the one day workshop held by the clinic and has previous experience of distributing ITN’s and education on Malaria.  We collectively went out into the community to hang nets and provide further education on Malaria.  “The biggest challenge is educating people on Malaria and getting them to sleep under the ITN,” Lawerence stated.  “People need to understand the importance of why they have been given a net.  We need to educate people more at PMTCT, Ante-Natal Clinic, and Under Five programs”.

Magoye Village

CHW Mr. Mainza hanging a net for a community member

The overall mass distribution of ITN’s in Magoye village was a great experience to be a part of and was successfully completed in two weeks.  Moving out into the community and talking about Malaria and ensuring that ITN’s were properly hung is the only way that we will actively STOMP out Malaria.  With the help of my clinic and community health workers, it’s a mission that we are all set out to accomplish.

JHUCCP

Johns Hopkins University Bloomberg School of Public Health Center for Communications Programs (JHUCCP) collaborates with Stomp in a number of countries including Senegal, Uganda, Ghana and Tanzania

In Senegal, JHUCCP’s  NetWorks program was one of the earliest institutional partners of Stomp. Volunteers in Senegal have worked with NetWorks on nationwide universal coverage campaigns and routine distribution logistic and Networks staff have been instrumental in training Volunteers at the Boot Camps.

In Ghana and Tanzania work with JHUCCP behavior change programs – BCS and COMMIT respectively – to promote malaria prevention at the community level. JHUCCP approaches behavior change from a place of deep respect for local communities and a focus on sustainability which makes JHUCCP an obvious partner for Stomp and Peace Corps generally.

In Uganda Volunteers work with JHUCCP’s Stop Malaria program to support the government of Uganda’s efforts to achieve the Millenium Development Goals