[Barcamp slide] new things in interface design with Modern UI style applications

oday, I have a presentation in Barcamp Sai Gon 2012 about the “Modern UI” and the new things it brings to the interface designer. I have shared it in my SkyDrive and everyone who is interested in can see online now. This is its content.

  • About the name of “Modern UI” and the name of “Metro”
  • The different views of a Windows 8 Modern UI styled application: portrait view, landscape view, snapped view and fill view
  • New navigation UX with Semantic Zoom, FlipView control and Group ListView/GridView
  • New commanding UX with the Appbar and the Charms
  • New application output message system

Well, this is my slideshow. Feel free to leave any comment here to help me improve it.

How I fix the TF30167 Error when creating new team project in VS2010

Hello everyone! Today, I am going to tell you how I can fix the TF30167 error when creating a new team project in Visual studio 2010. There are many things can be the reason for this ugly error. The way I solved the problem may or may not successfully applied to your case. However, I think you should give it a try.

The situation

I need to create a new team project under this condition:

  • Visual Studio 2010 SP1 on Windows 8.
  • Team Foundation Server 2010 with an account belonging to the Project Collection Administrator group.
  • Using MSF for Agile Software Development v5.0 template

In fact, I cannot create the project and receive this error:

Error

TF30167: The New Team Project Wizard could not finish creating the project Testing project.

Explanation

The following unexpected error was encountered while creating the team project: TF30229: Failure retrieving user information.

User Action

Restart Visual Studio and run the New Team Project Wizard again. If the problem persists, contact your Team Foundation Server administrator

What I did?

The solution is very simple. First, read this article from MSDN carefully and be sure that you have satisfied all requirements. If the TF30167 error cannot be eliminated, try to disable your antivirus for a while when creating the team project. I have disable the Avast and everything go like a charm!

See the video below for more details

My first look at Windows 8 User Experience

Last week, I did a foolish thing, installing a OS which is is beta state over my current OS. Of course, I backed up my data before doing that, but I do not recommend you to do the same thing with your work. However, after a few days of using the new Microsoft OS, I have had some idea about its UX and now I share it with you.

Have to do more steps to shutdown or restart

Unfortunately, my first impression about Windows 8 is a negative point. By removing the Start button, Microsoft do an intelligible action that make users do a longer process to shutdown or restart the computer. As you can see below, it takes us two steps to shutdown and three steps to restart in windows 7 whereas we have to do four confusing steps to do the same thing in windows 8.

the interaction to shutdown the computer in windows 7 (above) and Windows 8 (below)
the interaction to shutdown the computer in windows 7 (above) and Windows 8 (below)

Why do I say “confusing”? Well, in Windows 8, we have to activate the Charm bar (I’ll mention it later) to find the power button. Nevertheless, to do this, Microsoft tells us to hover our mouse to the top-right or bottom-right corner of the desktop. Unluckily, it is the bad news that if we move the mouse to the top-right corner, it’ll take us a time to move back to the bottom, where the power button is located. Moving to the bottom-right one? We will be easy hide our all windows, even the Charm bar itself, because of hovering the Show desktop button by accident, which is located exactly in the bottom-right corner of your desktop by default.

Change the way users customize their apps with Charm bar

Now, I talk about the Charm bar. First, take a look at some screenshot of my Charm bar

Windows 8 Charm bar in the desktop
Windows 8 Charm bar in the desktop
Windows 8 Charm bar in the start screen
Windows 8 Charm bar in the start screen
Windows 8 Charm bar in a Metro style applicaton - Weather
Windows 8 Charm bar in a Metro style applicaton – Weather

Instead of using the menu command Tools > Options … or Edit > Preferences …, windows 8 users now have to use Chamr bar to customize their applications. All settings options now can be found when navigating to Chamr bar. To show up this tool, we have two ways:

  • Use mouse gestures: hover the mouse to the top-right or the bottom-right corner of the desktop
  • Press Windows key + C

If we are using an Metro style application, the Settings section of the Charm bar contains all options for this. I we activate the Charm bar on our desktop, this section will lead to our computer settings (a system utility like our previous Control panel). To be honest, I really like this new feature, except what it does with the power button, when it allow user have more space for their apps.

Windows Store: a great innovation

Before windows 8, windows users does not have any hub to find new reliable applications for their computer. While Mac ones have Apple app store, Android ones have Android market (now, Google Play store), Ubuntu ones have Ubuntu application center, … windows users have to use some third-party applications/websites to find the programs they need. Now, with the Windows Store and the pre-installed Store application in windows 8, we can find new and reliable applications with screenshots, other users’ reviews, system requirements, … in one place and install them easily and silently.

The windows 8 pre-installed Store application
The windows 8 pre-installed Store application

New way to interaction with our workspace and Metro style applications

In their new OS, Microsoft introduces some new ways to interact with our workspace. First of all, we can split our desktop screen into two areas, which allow us to look at two application as the same time, with the Snap function. If you have a screen larger than 1366px in width, you can use this to keep your instance messaging program displayed when continue reading an article or play a game and don’t care about changing the size of our windows manually. This means that developers have to pay more attention about Responsive design and the situations that their application can be resized.

Snap function in windows 8 - play game when keep in touch with our friends
Snap function in windows 8 – play game when keep in touch with our friends

Another change is that we have no close, minimize or maximize button on our Metro style application. To close a program, we can use a gesture or the combination key Alt + F4 (believe me, unless you use windows 8 on a tablet, the gesture is a challenge, so remember the key shortcut). To switch to another program, use another gesture, or use Alt + Tab to circle between them, or use the new left panel (only for Metro style applications). See the video below for more detail about these new features.

Two types of account, great but need more improvements

Last but not least, one feature of windows 8 makes me so confused is using two types of windows account: Microsoft account and local account. We can bind our windows local account on our computer to a Microsoft live account. After that, we can synchronize our files, music, video clips, pictures, … between our computers which share the same Microsoft account, of course, we have to connect to the Internet to do this. With this feature, users who have a persistent Internet connection can save their time and money when they can use one multimedia library for several computers and change the way they store their stuff.

However, there are some points need improving with this idea. Microsoft allows us to switch between the Microsoft account and the local one without losing any files and settings, except the local account password! Furthermore, when using some Metro applications like Music or Video, windows suggests us to switch to the Microsoft account to sync our files and do not allow user to disable this silly notification. Why “silly”? Microsoft does not support the synchronizing function in all countries, so why they make users of these countries face too this meaningless message?

Conclusion

All above are just what I feel after one week using Windows 8. Up till now, it is still in beta state, which means that it will be changed a lot in the future. I think I will try this new OS until it official release to study about the new trend of interaction. By the way, if you have a middle-class computer and want to explore new things, give this OS a chance.

Solve the “Denied access” problem when using Wamp server 2 on Windows 8

After installing the Windows 8 Consumer Preview (I’ll post a article about its UX soon), I cannot access my localhost as well as all of my local web folders. For more specific, I met these error notice

Access denied on localhost when using Wamp server 2 on Windows 8
Access denied on localhost when using Wamp server 2 on Windows 8

Fortunately, I finally found the way to solve this problem (although I still don’t know why it happens now).

Quick fix on Apache httpd.conf and alias configuration files

First, open the httpd.conf file of your apache version by a text editor such as Notepad or Notepad++. It’s usually located at \wamp\bin\apache\<your apache version>\conf\httpd.conf or you can use the quick menu of Wamp manager to open it. Find these snippet before modify it:

# First, we configure the "default" to be a very restrictive set of 
# features.  
#
<Directory />
    Options FollowSymLinks
    AllowOverride None
    Order deny,allow
    Deny from all
</Directory>

Replace the Deny from all with Allow from all and save the file.We have not finished yet. Find another snippet:

#   onlineoffline tag - don't remove
    Order Deny,Allow
    Deny from all
    Allow from 127.0.0.1

Replace Deny from all with Allow from all again. The localhost runs correctly now.After do all above thing, I believe that you can locate to localhost and your local web project with your browser. However, if you navigate to https://localhost/phpmyadmin, you will continue getting the Forbidden error. The reason is you did not modify the alias configuration file to allow access from your localhost. Let open this file by using Wamp manager or finding it in \wamp\alias\phpmyadmin.conf, find this snippet

<Directory "c:/wamp/apps/phpmyadmin3.4.10.1/">
    Options Indexes FollowSymLinks MultiViews
    AllowOverride all
        Order Deny,Allow
    Deny from all
    Allow from 127.0.0.1
</Directory>

Change Allow from 127.0.0.1 to Allow from ::1 or you can do as above, change Deny from all into Allow from all. Now, that’s all.

See how I did it with a video

You can see this video on youtube to see how I solved this problems more clearly.