Hiển thị các bài đăng có nhãn Quy trình. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Quy trình. Hiển thị tất cả bài đăng

Thứ Tư, 11 tháng 2, 2009

Communicating with code

Some people can sell their ideas with a brilliant speech or a slick powerpoint presentation.

I can't.

Maybe that's why I'm skeptical of ideas that are sold via brilliant speeches and slick powerpoints. Or maybe it's because it's too easy to overlook the messy details, or to get caught up in details that seem very important, but aren't. I also get very bored by endless debate.

We did a lot of things wrong during the 2.5 years of pre-launch Gmail development, but one thing we did very right was to always have live code. The first version of Gmail was literally written in a day. It wasn't very impressive -- all I did was take the Google Groups (Usenet search) code (my previous project) and stuff my email into it -- but it was live and people could use it (to search my mail...). From that day until launch, every new feature went live immediately, and most new ideas were implemented as soon as possible. This resulted in a lot of churn -- we re-wrote the frontend about six times and the backend three times by launch -- but it meant that we had direct experience with all of the features. A lot of features seemed like great ideas, until we tried them. Other things seemed like they would be big problems or very confusing, but once they were in we forgot all about the theoretical problems.

The great thing about this process was that I didn't need to sell anyone on my ideas. I would just write the code, release the feature, and watch the response. Usually, everyone (including me) would end up hating whatever it was (especially my ideas), but we always learned something from the experience, and we were able to quickly move on to other ideas.

The most dramatic example of this process was the creation of content targeted ads (now known as "AdSense", or maybe "AdSense for Content"). The idea of targeting our keyword based ads to arbitrary content on the web had been floating around the company for a long time -- it was "obvious". However, it was also "obviously bad". Most people believed that it would require some kind of fancy artificial intelligence to understand the content well enough to target ads, and even if we had that, nobody would click on the ads. I thought they were probably right.

However, we needed a way for Gmail to make money, and Sanjeev Singh kept talking about using relevant ads, even though it was obviously a "bad idea". I remained skeptical, but thought that it might be a fun experiment, so I connected to that ads database (I assure you, random engineers can no longer do this!), copied out all of the ads+keywords, and did a little bit of sorting and filtering with some unix shell commands. I then hacked up the "adult content" classifier that Matt Cutts and I had written for safe-search, linked that into the Gmail prototype, and then loaded the ads data into the classifier. My change to the classifier (which completely broke its original functionality, but this was a separate code branch) changed it from classifying pages as "adult", to classifying them according to which ad was most relevant. The resulting ad was then displayed in a little box on our Gmail prototype ui. The code was rather ugly and hackish, but more importantly, it only took a few hours to write!

I then released the feature on our unsuspecting userbase of about 100 Googlers, and then went home and went to sleep. The response when I returned the next day was not what I would classify as "positive". Someone may have used the word "blasphemous". I liked the ads though -- they were amusing and often relevant. An email from someone looking for their lost sunglasses got an ad for new sunglasses. The lunch menu had an ad for balsamic vinegar.

More importantly, I wasn't the only one who found the ads surprisingly relevant. Suddenly, content targeted ads switched from being a lowest-priority project (unstaffed, will not do) to being a top priority project, an extremely talented team was formed to build the project, and within maybe six months a live beta was launched. Google's content targeted ads are now a big business with billions of dollars in revenue (I think).

Of course none of the code from my prototype ever made it near the real product (thankfully), but that code did something that fancy arguments couldn't do (at least not my fancy arguments), it showed that the idea and product had real potential.

The point of this story, I think, is that you should consider spending less time talking, and more time prototyping, especially if you're not very good at talking or powerpoint. Your code can be a very persuasive argument.

The other point is that it's important to make prototyping new ideas, especially bad ideas, as fast and easy as possible. This can be especially difficult as a product grows. It was easy for me to stuff random broken features into Gmail when there were only about 100 users and they all worked for Google, but it's not so simple when there are 100 million users.

Fortunately for Gmail, they've recently found a rather clever solution that enables the thousands of Google engineers to add new ui features: Gmail Labs. This is also where Google's "20% time" comes in -- if you want innovation, it's critical that people are able to work on ideas that are unapproved and generally thought to be stupid. The real value of "20%" is not the time, but rather the "license" it gives to work on things that "aren't important". (perhaps I should do a post on "20% time" at some point...)

One of the best ways to enable prototyping and innovation on an established product is though an API. Twitter is possibly the best example of how well this can work. There are thousands of different Twitter clients, with new ones being written every day, and I believe a majority of Twitter messages are entered though one of these third-party clients.

Public APIs enable everyone to experiment with new ideas and create new ways of using your product. This is incredibly powerful because no matter how brilliant you and your coworkers are, there are always going to be smarter people outside of your company.

At FriendFeed, we discovered that our API does more than enable great apps, it also reveals great app developers. Gary and Ben were both writing FriendFeed apps using our API before we hired them. When hiring, you don't have to guess which people are "smart and gets things done", you can simply observe it in the wild :)

In my previous post, I asked people to describe their "ideal FriendFeed". Since then, I've been thinking about ideas for my "ideal FriendFeed". Unfortunately, it's very difficult for me to know how much I like an idea based only on words or mockups -- I really need to try it out. So in the spirit of prototyping, I've used my spare time to write a simple FriendFeed interface that prototypes some of the things I've been thinking about. This interface isn't the "future of FriendFeed", it's just a collection of ideas, some that I like, and some that I don't. One thing that's kind of cool about it (from a prototyping perspective) is that it's written entirely in Javascript running in the web browser -- it's just a single web page that uses FriendFeed's JSON APIs to fetch data. This also means that it's relatively easy for other people to copy and change -- you don't even need a server!

Trích blog Paul Buchheit

------------------------------------------------------------------------------
Resume by TuanNM : có những ý tưởng dường như rất với vẩn, nhưng khi implemented lại rất tuyệt vời, ngược lại, cũng có những idea rất tuyệt vời cho đến khi bạn chạy thử nó. Hãy cố gắng implement your idea as soon as possible, đối với các innovation app, đừng quá câu nệ thiết kế ..., việc viết lại code là chuyện hết sức bình thường. Chính tôi đã phạm sai lầm này :(.

Thứ Hai, 10 tháng 11, 2008

Quy trình phát triển GUI cho WebSite of iGURU

Bài viết không đi sâu vào nghệ thuật thiết kế Web, bài viết chỉ ra các bước nên làm với một dự án thiết kế giao diện Web.
Quy trình được dựa trên Chuẩn IWP phiên bản 1.0 của IGURU. Bài viết có sử dụng giao diện của Website bán hàng trực tuyến, Web site tin tức

Quy trình bao gồm các bước sau:
Bước 1: Xác định yêu cầu của khách hàng.
Bước 2: Phác thảo ý tưởng trên giấy
Bước 3: Đánh giá mẫu phác thảo
Bước 4: Thiết kế đồ hoạ bản đơn sắc
Bước 5: Phối màu cho giao diện Web
Bước 6: Xây dựng tài liệu về chuẩn CSS, clientsite script, ảnh, folder cho trang Web
Bước 7: Sử dụng các ngôn ngữ đánh dấu, lập trình để thiết kế giao diện.
Bước 8: Test giao diện trên các trình duyệt
Bước 9: Chuyển mã nguồn tới bộ phận phát triển Web

Bước 1: Xác định yêu cầu của khách hàng.
Yêu cầu là một điều kiện hoặc khả năng mà hệ thống phải tuân theo hoặc có. Nhiều khi khách hàng cũng không biết họ cần gì, nên khi xác định yêu cầu bạn nên xây dựng trước một biểu mẫu câu hỏi để lấy yêu cầu của khách hàng. Yêu cầu phải đạt những tiêu chí sau:

  • Yêu cầu phải bao quát giao diện, chức năng, cấu trúc nội dung, đối tượng xem Web site.
  • Trao đổi thông tin dựa trên các yêu cầu đã xác định trước khi tiếp cận khách hàng. Bạn phải nghiên cứu về yêu cầu chung của khách hàng trước khi tiếp cận.
  • Xây dựng bảng câu hỏi logic để chuyển đổi sang phân tích yêu cầu nghiệp vụ, yêu cầu hệ thống đơn giản, dễ dàng.
  • Đặt độ ưu tiên, lọc và theo dõi các yêu cầu.
  • Đánh giá khách quan các chức năng và hiệu năng.

Bước 2: Phác thảo ý tưởng trên giấy
Nào giờ là lúc bạn thể hiện hoa tay của mình, để linh hoạt trong việc phác ý tưởng, bạn nên sử dụng bảng vẽ, bút chì, thước kẻ và tẩy. Với những dụng cụ trên bạn phác ý tưởng, ở đây là bố cục trên giấy. Dựa vào kinh nghiệm thành công của bạn, bạn thấy những tiêu chuẩn nào nên có, ví dụ các tiêu chuẩn sau của IWP 1.0:

  • Banner không quá 1/3 màn hình thực của người sử dụng (màn hình thực là màn hình của trình duyệt có thể xem được trang Web, đã bỏ đi các thanh tool bar của trình duyệt Web).
  • Sitebar không lớn quá 25% chiều rộng trang Web.
  • ....

Bạn cũng nên xây dựng chuẩn bố cục dựa trên nội dung đối với toàn bộ Web site. Web site là tập hợp của những trang Web, mỗi trang Web tập hợp các nội dung có mối liên quan hoặc không giữa các trang Web. Dựa vào nội dung, bạn chia trang Web làm 02 vùng:

  • Vùng template (theo chuẩn IWP)
  • Vùng hiệu chỉnh.

Vùng template là vùng không hiệu chỉnh hoặc hiệu chỉnh rất ít xuyên suốt các trang Web của Web site.
Vùng hiệu chỉnh là vùng có thay đổi nội dung trong hầu hết các trang Web của Web site.
Bạn nên cân nhắc trước khi xác định vùng nào là vùng template hoặc vùng hiệu chỉnh, vì việc này sẽ ảnh hưởng đến xây dựng mã CSS, HTML chung của giao diện Web site.

Bạn cũng nên quy chuẩn các đối tượng trong bố cục để dễ trình bày, quản lý, theo dõi. Ví dụ: Ảnh là hình chữ nhật có đánh dấu x; chữ là đường kẻ,...
Nếu đây là một dự án phức tạp bạn nên tham khảo quy trình RUP và kết hợp với quy trình này để ra một giải pháp quản lý dự án phù hợp hơn.

Ví dụ:

Bước 3: Đánh giá mẫu phác thảo
Bạn nên có tối thiểu 03 mẫu phác trên giấy, sau đó bạn treo lên tường và mời những người khác cùng xem và đánh giá. Mẫu phác thảo đạt những yêu cầu phải trả lời được những câu hỏi như sau:

  • Họ thích mẫu nào?
  • Mẫu thiết kế có đáp ứng các yêu cầu của khách hàng không?
  • Tìm thông tin, chức năng có dễ không?
  • Đứng xem, bạn có thấy bố cục có rời rạc không? Có thẩm mỹ không?

Nếu câu trả lời không đạt yêu cầu trên bạn nên ngồi lại và vẽ tiếp, điều này sẽ giúp bạn giảm chi phí nhiều nếu bạn sử dụng máy tính để thiết kế. Sau khi chọn được một mẫu chúng ta chuyển sang bước 4.

Bước 4: Thiết kế đồ hoạ bản đơn sắc
Sau khi phác thảo xong, bạn sử dụng công cụ đồ hoạ máy tính để thiết kế mẫu giao diện Web. Đầu tiên chúng ta cần xem bố cục trên Máy tính có hợp lý không, chính vì vậy chúng ta chưa phối màu cho các mảng màu, đường kẻ, chữ cho trang Web, tất cả các bạn để thang màu xám để bước tiếp theo phối màu dễ dàng hơn. Tuyệt đối không để màu trắng và đen với những vùng muốn phối màu khác hai mầu trên.

Nếu bạn sử dụng công cụ đồ hoạ, chúng tôi đề xuất sử dụng Photoshop CS2 để áp dụng các chuẩn thiết kế giao diện dễ dàng hơn. Ví dụ đặt tên, sắp xếp folder, phân cấp folder, áp màu cho layer,...

Sau khi căn chỉnh bố cục và thiết kế xong, bạn nên in ra và lại treo lên tường mời mọi người đến đánh giá giống như bước 3. Đánh giá hiện giờ cần phải trả lời những câu hỏi như sau:

  • Tìm thông tin, chức năng có dễ không? Không dễ vì sao? Do độ tương phản, kích cỡ, …?
  • Trình bày thông tin quan trọng có dễ tìm với giới hạn của màn hình thực hay không?
  • Giao diện có dễ đọc, dễ sử dụng với người dùng mục tiêu hay không?
  • Giao diện có thể hiện ra tính cách riêng hay không?
  • ….

Ví dụ:

Bước 5: Phối màu cho giao diện Web
Khi bản đơn sắc đạt yêu cầu, bạn chuyển sang phối màu cho giao diện Web. Khi phối màu cho giao diện bạn nên tuân thủ các phương pháp chẳng hạn như sau:

  • Dựa vào màu sắc yêu cầu từ bảng câu hỏi để đưa ra phương pháp phối màu cho Web site. Có 1 màu chủ đạo, 1 màu thứ cấp và các màu chỏi để tăng phần sinh động cho Web.
  • Với màu nền là màu pha gam xám sẽ có kiểu phối màu riêng. Ví dụ phần nội dung sẽ có màu đỏ, vàng chanh, vàng, cam, xám, da trời,… tuỳ thuộc vào mục đích của Web site.
  • Với text nên tối đa 3 màu, 3 font, 3 cỡ chữ, 3 kiểu chữ, 3 kiểu trace, kerning.

Ví dụ: