Category Archives: Design

Design considerations

Take a SIP

I posted briefly yesterday about an experience with the WordPress app for Windows Phone.  I’ve not used it much more than an initial look around, but for the most part it seems to be a great app – apart from the experience when you are writing a post.

Once you get into the text editor for the post body, you initially see a screen like this.

The WordPress app post editor screen
The WordPress app post editor screen

OK, so the buttons look kind of randomly placed, but no biggy.  The issue I had was when I entered the textbox and started adding text.

The WordPress app post editor screen with SIP
The WordPress app post editor screen with SIP

Now we have the ability to enter text, just as you’d expect.  There are, however, 2 issues here.

  1. There is no obvious way to save your work and return to the previous screen, and
  2. there is no way to access the additional feature buttons that were on the screen

It turns out that the way to get back from the editor once you finish entering text is to simply press the back button. I’m not sure about that design choice, to be honest. It feels counter-intuitive somehow, as if you are going to abandon your changes. In fact, it felt so counter-intuitive that I avoided doing it until all hope was lost and I was resigned to losing my text. Not a great user experience.

The second issue is harder to work around. If you want to apply formatting to the post after you’ve entered your text, you have to jump through all kinds of hoops to achieve it (re-enter the text editor with the SIP, select the word, press the back button, press the required formatter).

There has to be a better way. Unfortunately, the platform doesn’t allow much flexibility in this regard. There’s no simple way to implement your own HTML editor on the platform without some sort of compromise – I’ve said it before and I’ll say it again, designing an app is hard and there’s really no substitute for experience and a good designer.

One option that we have is to use a third party control, prehaps the COmponentOne RichTextBox control.

ComponentOne RichText editor
ComponentOne RichText editor

Note the use of the app bar to add edit functions, even while the SIP is present. It doesn’t immediately get around the first issue I mentioned, but is certainly a step in the right direction.

I am going to write a further post about handling the SIP in apps, and how to modify the layout to ensure that important UI elements don’t become inaccessible when the SIP is displayed.

Note : I am not trying to criticise the authors of the WordPress app – I like the app and I’m glad the authors are focussing on their core strengths of developing a great blogging platform rather than supporting applications.

Extending the platform with ICommands

The ICommand interface has been around for a long time now. It is typically used in a desktop application, for example, to allow the simple binding of buttons or menu items to an action in the code behind, and can be extremely useful.

A common scenario in Windows 8 where command support would be useful is on the click event of a GridView item – for example, an item on your main menu screen. Unfortunately, the platform doesn’t support commands here out of the box, so we have to do some juggling and introduce an attached property to do the work for us.

Let’s start by creating a class to hold the attachable property.

Once we have that set up, we need to define an ICommand in our view model. In this case, I’m using MvvmLight, so I’ll use the RelayCommand type.

Next, we need to wire up the ItemClick event on the GridView (or ListView – both will work with this property)

The last step is to wire up the main page to listen for navigation messages from the ViewModel’s command.

Now, when you run your app, you should be able to navigate to the clicked item (or if you haven’t changed the code, see a MessageDialog with the item id). Note that in the command’s CanExecute method, I only allow navigation to items whose Id is an even number.

GridTapCommand Example (.zip 28kb)