Visual Studio Toolbox

Designing Windows 8 Line of Business Apps Revisited

Download this episode

Download Video

Description

In this episode, Robert revisits the Windows 8 line of business app he wrote. This app provides the ability for employees to create and submit expense reports—and for managers to view and approve or reject them. Robert first reviews the app as you last saw it and then discusses what changes he made to the app's user interface and why he thinks those changes resulted in a much better app.

He also announces that the app is now available for your downloading pleasure on CodePlex.

Embed

Format

Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    • Leon Meijer

      Thanks again Robert. Very helpful.
      I would like to see how to sync offline data to the cloud. Are you planning such an episode?

    • LeonMeijer

      Thanks again Robert. Very helpful.
      I would like to see how to sync offline data to the cloud. Are you planning such an episode?

    • JamesB

      Clear lack of information density is a fail! Imagine using this app with a mouse...smh. Build business apps the way business apps should be build...enough of this big crazy squares and rectangles using the VS template with the horizontal scrolling...this UI is annoying. Instead of a 'save' menu being always visible...a user has to first right-clicked or swiped up to show 'save' button on app bar...this is a big FAIL in usability. No

    • BuddyP

      Looking to future enhancements, you might want to put a pager control at the "charges" detail level.  Even though you have selected a given charge at the "list" level, you may then want to just click the small arrows on either side to navigate between details without having to go back to the list.  This metaphor would also apply to other categories where you have navigated down to the most detail level.

    • contextfree`

      I'd say that putting the "save" button in the on-demand app bar is not appropriate here - Save is functionality that is required as part of the core function of the page (as is clear from the fact that when the page is not saved it tells you that it's not saved) so it should be visible on the page canvas.

      http://msdn.microsoft.com/en-us/library/windows/apps/hh465302.aspx :

      Don't put critical commands on the app bar.

      Don't place commands that are core to what makes an app great on the app bar. For example, in a camera app, place the  "Take a picture" command on the app page rather than in an app bar. You could either add a button to the app page or simply let people tap the preview to take the picture.

       

       

    • Lizard​Rumsfeld

      An interesting video, but I have to agree JamesB - the lack of information density and the requirement to constantly mouse down to the app bar for critical functions would leave employees quite frustrated with laptop/desktop PC's.  Then again admittedly I am biased against the concept of the app bar on a m&k interface, I just don't think it works well overall in the metro apps I've used.

      This seems to be a case of trying to shoehorn the metro aesthetic/design principles into an app that really doesn't seem to be benefit from it.

    • bondsbw

      I was about to make the same comment as contextfree`.  I might go one step further and automatically save as I go.

      I also feel that JamesB's comment was insightful.  I think your data entry forms have the appropriate information density, but that the "summary" views and other read-only views should be more information rich.  The result is more clicks and more pages, which in medium or large LOB apps would cause the user to lose context and get lost.  It's almost too much even in this small app.

      The app is boring.  I feel that many Windows 8 apps are this way.  I suppose that developers fear what Microsoft would think if they used more than two colors.  And I don't like the inconsistency in the color scheme.  The summary screens use a light overall background, and dark tiles with light text.  Then, data entry screens use a light background with dark text.  I would make the summary screens have a darker background, and then use that with light text for data entry.  (Or, do the inverse if you would rather have dark text on light backgrounds.)

    • jatinam

      Downloaded the code from the codeplex site, opened the solution and did a "Build" and got the following error and warning

      Error 1 Could not find SDK "Callisto, Version=1.2.1". Expenses
      Warning 2 The referenced component 'Callisto' could not be found.  Expenses

    • jatinam

      Had to remove reference to "Callisto.." from the References Node and had to go to Nuget and reinstall Callisto, now the Solution Builds fine.

    • schroedl

      Have to agree with some of the comments about the UI. If I had to use something like this daily I'd go nuts. Metro UI may be okay for music/news/games apps but something as simple as this starts to reveal the limitations of this UI language. There is just way too much functionality buried under rocks. The application loses it's discoverability in exchange for a barren UI.

    • Kevin

      want to comment on it but I guess it doesn't matter since it won't change anything for win8. well, good thing 7 comes before 8.

    • Virgil

      Sorry, but metro interface just sucks for a more complex business app. Too many mouse clicks...

    • Jordan

      I agree that the modern UI lends itself well to consumption focused apps. You need to take time, however, to thoughtfully design apps which require a lot of user input in the modern UI.

      I created www.windows8templates.com as a tool for rapid wireframing and prototyping Windows Store themed Windows 8 and Windows Phone 8 apps much like this one. This allows me, and many who are using my templates, to quickly mockup and test user interactions before writing a single line of code.

      These PowerPoint templates also come with a library of over 200 customizable Storyboard Shapes in PowerPoint. You can also find them on the Visual Studio Gallery here: http://visualstudiogallery.msdn.microsoft.com/0221df12-b844-4cf2-9ccd-feb0fc1d2b01

    • PedroRomero​NYC

      @Jordan:completely agree. I don't let my team write a line of code until wireframes are locked between our designers and clients. I will check out your templates. We have been using the Windows 8 photoshop templates which still take a lot of time.

    • Morten

      Great video and interesting to see the transition into a good looking app. Just downloaded the source on Codeplex, and the main zip file is a bit confusing as it itself contains another zip file of some of the same files. But after running Beyond Compare on the contents, I see there are differences in the sources. Maybe you should have another look at the zip file and clean it up a bit ;-) But thanks for submitting it anyway.

    • luzi

      You mention your logic on the placement of buttons in the AppBar. I don't proclaim myself as an expert, but I think you are mistaken, or at least it seems wrong to me. I agree with the logic as stated by Microsoft's guidelines, though I think your understanding of what global means is incorrect. I will assert that global means the functionality is shared between more than one page (perhaps all), while local is specific to one. If this is what you're doing, then "select all" should be paired with "clear selection".

    • Tepliuk

      This is my favorite show on channel 9!

    • Dirtbagg

      Vey cool, Robert, I like it for the design and usage.

      I'm was re-watching this and see similarities that I can use for my app I am writing. Thanks,

    Comments closed

    Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.