locked
using templates in projects without images

    Question

  • I have an app that's related to managing todo lists.  A user may have a bunch of lists, and each one has a list of things to do.  This seems natural for the standard template layouts, and in a recent Application Excellence program review that was the most significant piece of feedback I got (use the templates!).

    That all makes sense to me conceptually, but in practice I am having trouble using the templates for one big reason: they all seem to require images.  The user is entering todo items and making lists, but much of the time there won't be any images associated with the lists.  They could be for very disparate things I couldn't think of in advance, and a lot of them will be quickly created and dispensed with so the user probably doesn't want to take the time to select an image for each todo list let alone for each action/item within it.

    The way my app is structured it seems to make the most sense to use a listview (vs. gridview), but there simply aren't images for me to use.

    The feedback I received was very strong about needing to use templates, and while I would be happy to do so I don't have any clue how to use them in cases where there aren't images associated with the content.  This has to be a common problem (how many data sources really have images associated with all of them?), so I'm wondering if there is any guidance on how to deal with these sort of situations while maintaining the value provided by the templates.

    If anyone has suggestions please let me know.

    Thursday, June 28, 2012 6:10 AM

Answers

  • I've just recently passed an Excellence Lab with a finance application that displays numeric information on the main page's gridview, each item shows numbers and no images... But I tried to make the visual aspect of the information fits the "Metro spirit".

    What I mean is that it's no necessary that your application use images (if you don't need it), but you should design the look of your application to be visually appealing and useful!!
     
    For example, you could use a icons system to display certain relevant information or changing the background color to give more importance to some items (I have done that). Make color tests, think about design and create a consistent and solid color scheme that makes your application looks attractive. Maybe a dashboard style...

    It's all about design... You may find useful this inspiring video about Microsoft's vision in 2019: It's full of examples about how to display everyday information.


    Regards
    • Marked as answer by jm47 Friday, June 29, 2012 8:10 PM
    Friday, June 29, 2012 7:29 PM

All replies

  • Which language and UI toolkit are you using? HTML/JS/CSS? Xaml/C++? Xaml/C#?

    The details will differ in HTML/CSS and in Xaml, but in either case you should be able to edit the item template to show the relevant details. For example, for a todo list you might want to show the name of the item, the due date (if any), importance, an icon with a category, etc.

    --Rob

    Thursday, June 28, 2012 6:53 PM
    Moderator
  • I'm using C#/Xaml.

    I am perfectly happy using data templates and such to combine various controls into something cohesive.  However, the GridView for example in the templates always seems to have a big image with any content overlaid across the bottom portion.  I could structure the name of the action, a checkbox, some information about the due date, a flag if appropriate, etc. into a box-shaped structure, but I wouldn't have a picture to associate with it.

    If I was to take this approach, do I need (in following the metro guidelines) to make the data templates result in a square shape?  Should I put them on top of a square of a solid color that's different than the background color to set each item apart?  Is it consistent with the style if I just use whitespace and text sizes to make it clear which stuff is related but without images?

    Friday, June 29, 2012 6:46 AM
  • I've just recently passed an Excellence Lab with a finance application that displays numeric information on the main page's gridview, each item shows numbers and no images... But I tried to make the visual aspect of the information fits the "Metro spirit".

    What I mean is that it's no necessary that your application use images (if you don't need it), but you should design the look of your application to be visually appealing and useful!!
     
    For example, you could use a icons system to display certain relevant information or changing the background color to give more importance to some items (I have done that). Make color tests, think about design and create a consistent and solid color scheme that makes your application looks attractive. Maybe a dashboard style...

    It's all about design... You may find useful this inspiring video about Microsoft's vision in 2019: It's full of examples about how to display everyday information.


    Regards
    • Marked as answer by jm47 Friday, June 29, 2012 8:10 PM
    Friday, June 29, 2012 7:29 PM
  • Thanks, that's great.  I was in a really early stage and I haven't yet spent much time on design (I mostly did it to get some feedback on interaction issues).  Those are good suggestions and I'm happy to hear I don't have to use images.  I'll think in particular about how to make some tasteful color fit in and make it look better.
    Friday, June 29, 2012 8:11 PM
  • The main concept is to step back from your app and consider how it looks from both an aesthetic and usability standpoint. A great app needs both excellent functionality and an attractive and usable interface.

    The default templates have images because that works well for many apps. You don't need to (and shouldn't) use images if they aren't appropriate for your app. Likewise, the templates should be rectangular but don't have to be square (look at the start screen for an example), and they don't all have to be the same size (see How To: Create a Variable Sized Grouped GridView (like the store) ).

    You can use white space and typography to group your items, but I would consider putting them on a colored rectangle to make the grouping more obvious. From a user's perspective, I very much like Francisco's suggestions about using color and icons for informational as well as aesthetic reasons (but make sure color is not the sole way information is provided, so color blind users can still use the app).

    --Rob

    Friday, June 29, 2012 8:19 PM
    Moderator