locked
Can I use Button & WebView on Page ?

    Question

  • Hi all, our company meet microsoft yesterday and discussing about our UI design.

    I'm wordering what she told us was correct.

    She told us you can't use button and WebView on page. Is that true ?( She said only use "button" on appbar)

    These restriction let us very difficult to design our UI. then I start to dig document in MSDN & MSDN Forum.

    I didn't find anything related.  Can somebody tell me if this is true or not.


    Also she told us many things that confused us and no I didn't find any document desscirbe. such as "No combobox filter to change content on HubPage" etc.

    Wednesday, August 8, 2012 10:10 AM

Answers

  • Hi,

    technically it's absolutely no Problem to combine a webview with further UI controls (e.g. Buttons). From a design perspective you should focus on your main UI component and move everything else out of the users view (e.g. AppBar). But I would not agree that this is the only way to go. If there is a good reason to Combine UI elements with an WebView (e.g. OAuth authentication process) it's fine.

    My private design goal is to make content focused UIs like Microsoft says, but whenever I'm able to help the user using my app while breaking this design guideline I will do so, because UI comfort > UI design.


    If you like my post or consider it as a valid answer, please use the buttons to show me - Oliver

    Microsoft Most Valuable Professional for BizTalk Server
    http://www.appfabric.de

    • Marked as answer by FatJohn Wednesday, August 8, 2012 3:37 PM
    Wednesday, August 8, 2012 12:40 PM
  • You don't give enough context about what your app is doing to answer. You definitely can use both a WebView and a button on the same page, depending on how they are used. The WebView isn't special. It should be treated the same as any other similar content in the app. Probably what the consultant was referring to was the overall goal to remove chrome and navigation elements from the page in order to emphasize the content.

    See Design the UI for your app

    How should you organize commands?  Use your outline of the flow steps to identify potential commands that you need to design for. Then think about where those commands should live in your app.

    • Always try to use the content.  Whenever possible, let users directly manipulate the content on the app's canvas, rather than adding commands that act on the content. For example, in the travel app, let users rearrange their itinerary by dragging and dropping activities in a list on the canvas, rather than selecting the activity and using Up or Down command buttons.
    • If you can't use the content, place commands on one of these UI surfaces:

      • In the app bar: You should put most commands on the app bar, which is usually hidden until the users bring it up.
      • On the app's canvas itself: If the user is on a page or view that has a single purpose, you can provide commands for that purpose directly on the canvas. There should be very few of these commands.
      • In a context menu: You can use context menus for clipboard actions (such as cut, copy, and paste), or for commands that apply to content that cannot be selected (like adding a push pin to a location on a map).

    --Rob

    • Marked as answer by FatJohn Wednesday, August 8, 2012 3:17 PM
    Wednesday, August 8, 2012 2:58 PM
    Owner

All replies

  • Hi,

    technically it's absolutely no Problem to combine a webview with further UI controls (e.g. Buttons). From a design perspective you should focus on your main UI component and move everything else out of the users view (e.g. AppBar). But I would not agree that this is the only way to go. If there is a good reason to Combine UI elements with an WebView (e.g. OAuth authentication process) it's fine.

    My private design goal is to make content focused UIs like Microsoft says, but whenever I'm able to help the user using my app while breaking this design guideline I will do so, because UI comfort > UI design.


    If you like my post or consider it as a valid answer, please use the buttons to show me - Oliver

    Microsoft Most Valuable Professional for BizTalk Server
    http://www.appfabric.de

    • Marked as answer by FatJohn Wednesday, August 8, 2012 3:37 PM
    Wednesday, August 8, 2012 12:40 PM
  • thanks your reply.

    I'm thinking the same as you. But I'm just afraid that once we did this and our app won't pass Windows Store certificate.
    We have to use WebView because some contents such as financial news, stock information, etc. are html formated. (of course not all our contents are html)

    Btw, she also told us, apps already in Windows Store aren't 100% match their UI guideline. And we can't take those for reference.


    Wednesday, August 8, 2012 1:39 PM
  • You don't give enough context about what your app is doing to answer. You definitely can use both a WebView and a button on the same page, depending on how they are used. The WebView isn't special. It should be treated the same as any other similar content in the app. Probably what the consultant was referring to was the overall goal to remove chrome and navigation elements from the page in order to emphasize the content.

    See Design the UI for your app

    How should you organize commands?  Use your outline of the flow steps to identify potential commands that you need to design for. Then think about where those commands should live in your app.

    • Always try to use the content.  Whenever possible, let users directly manipulate the content on the app's canvas, rather than adding commands that act on the content. For example, in the travel app, let users rearrange their itinerary by dragging and dropping activities in a list on the canvas, rather than selecting the activity and using Up or Down command buttons.
    • If you can't use the content, place commands on one of these UI surfaces:

      • In the app bar: You should put most commands on the app bar, which is usually hidden until the users bring it up.
      • On the app's canvas itself: If the user is on a page or view that has a single purpose, you can provide commands for that purpose directly on the canvas. There should be very few of these commands.
      • In a context menu: You can use context menus for clipboard actions (such as cut, copy, and paste), or for commands that apply to content that cannot be selected (like adding a push pin to a location on a map).

    --Rob

    • Marked as answer by FatJohn Wednesday, August 8, 2012 3:17 PM
    Wednesday, August 8, 2012 2:58 PM
    Owner
  • Thank you Rob.
    Your answer gives us a big relief.

    And I'm sure the consultant said exacatlly "no webview" "no buttons" during our meeting.

    I'll let my colleagues know this. Thank you again.



    • Edited by FatJohn Thursday, August 9, 2012 9:51 AM
    Wednesday, August 8, 2012 3:36 PM