I am not a UI expert. But for developing UI on Windows 8 Apps I need to understand the complete UI as Microsoft's tag line "Content Over Chrome" . I will try to discuss regarding the UI guidelines that Microsoft has laid for a Windows store app.
There are not many articles on Windows 8 app store yet. So my complete knowledge is from the sample apps that I install on my box , the apps that I create and msdn.
Earlier I was having constant fights with Datta ,' Why UI to our team , we are code developers and not UI experts'. Thanks to Datta for his patience , now I know why UI is such an important part of any Windows store app.
The basic reason why we should concentrate on UI before getting into code are:
Let us first try to see
If you have a application with very few pages , and the user needs to go back and forth between the pages , then your app is best candidate for implementing Flat Navigation.
The best example I think is an calendar app or a drop box kind of app , mail app , a video app.
You should go for flat navigation when :
a. you can separate content into various pages.
b. all your pages are at the same level.
c. you need to go back and forth between contents.
When you have a web site where you can segregate the pages based on the content and the details of the content presented then you should go with Hierarchical Navigation. Classic example for a hierarchical navigation is a LMS application.
An example of flat navigation:
An example of hierarchical navigation:
There are two terms that we use when creating a flat navigation system:
a. Top app bar
b. Switching
Top app bar is nothing but a thumbnail kind of view , basically this is used to switch between pages.
You must have seen a top app bar in many of the content management system.
In Windows 8 , the page states/view states are not persisted when you use a flat navigation system , because basically all the pages are independent of each other. Switching between pages is directly done.
Now you know what kind of navigation layout you want for the app.
In the next article we will see on layout and commanding.
There are not many articles on Windows 8 app store yet. So my complete knowledge is from the sample apps that I install on my box , the apps that I create and msdn.
Earlier I was having constant fights with Datta ,' Why UI to our team , we are code developers and not UI experts'. Thanks to Datta for his patience , now I know why UI is such an important part of any Windows store app.
The basic reason why we should concentrate on UI before getting into code are:
- Content over Chrome : the basic idea behind Windows 8 Store apps is content over chrome.
- Create Once User Anywhere : You write the code for a Windows 8 app only once and the app is ready for deployment in any type of devices whether it is PC , mobile , laptop, tabs etc. The resolution , the structure of your app should not change based on the devices but rather the app should have consistent and elegant.
- App should be easy to navigate using gestures , interactions , mouse as well as keyboard.
- Navigation
- Commanding
- Page Design
- Typography
Typography (from the Greek words τύπος (typos) = form and γραφή (graphe) = writing) is the art and technique of arranging type in order to make language visible.
'HOW SHOULD I PLAN NAVIGATION FOR MY APP?'
Your Windows app can follow either- Hierarchical Navigation
- Flat Navigation
If you have a application with very few pages , and the user needs to go back and forth between the pages , then your app is best candidate for implementing Flat Navigation.
The best example I think is an calendar app or a drop box kind of app , mail app , a video app.
You should go for flat navigation when :
a. you can separate content into various pages.
b. all your pages are at the same level.
c. you need to go back and forth between contents.
When you have a web site where you can segregate the pages based on the content and the details of the content presented then you should go with Hierarchical Navigation. Classic example for a hierarchical navigation is a LMS application.
An example of flat navigation:
An example of hierarchical navigation:
Hierarchical Navigation
Hierarchical Navigation there are three layers:
a. Hub Page
b. Section Page
c. Details Page
Hub Page is the root page , it is the place where the user get info about the app , all the dashboard kind of data , what is new etc.
Every section in hub page is linked to a section page.
In section page the user get a little detailed view of what the page is all about. Again section view doesn't give you a detailed information. Every piece in a section page should link to a detail page.
The detail page is the page where you get the detailed info of what you want.
So, basically all the hierarchical navigation kind of apps have three layered information flow.
Hub page:
Section Page:
Details Page
Flat Navigation:
Flat Navigation is basically browsing from one page to other. So , all the screens look almost the same just the content changes based on ,onto which page you want to navigate to:There are two terms that we use when creating a flat navigation system:
a. Top app bar
b. Switching
Top app bar is nothing but a thumbnail kind of view , basically this is used to switch between pages.
You must have seen a top app bar in many of the content management system.
In Windows 8 , the page states/view states are not persisted when you use a flat navigation system , because basically all the pages are independent of each other. Switching between pages is directly done.
Now you know what kind of navigation layout you want for the app.
In the next article we will see on layout and commanding.
No comments:
Post a Comment