Một vấn đề đơn giản bạn thường gặp trong thiết kế web là tách nội dung thành hai phần riêng biệt khác nhau. Là một nhà thiết kế, tôi thường dùng một đến hai thủ thuật để làm việc này. Vậy tại sao lại không kết hợp các thủ thuật với nhau?
Hôm nay, chúng tôi sẽ cho bạn thấy 10 cách tuyệt vời giúp tách riêng biệt hai phần nội dung. Mỗi ví dụ đều lấy từ các trang web thực tế và bạn có thể tham khảo.
Tương phản là vua
Đây là cách tách các phần nội dung đơn giản và phổ biến nhất. Tất cả những gì bạn cần làm là chọn hai màu tương phản cho phần nội dung.
Thường là màu trắng và một màu tối hơn như màu đen hoặc màu đỏ tươi. Màu sắc tương phản là công cụ thiết kế mạnh mẽ nhất, sử dụng một cách khéo léo bạn sẽ có một thiết kế bắt mắt.
Làm mờ nhanh
Làm mờ nhanh ngược lại với ví dụ trên. Thay vì dùng màu tương phản và những đường line là tương phản nhẹ và tách riêng biệt.
Ý tưởng này dùng cho các tình huống mà bạn muốn có một sự khác biệt nhỏ giữa phần hình ảnh và nội dung nhưng chúng vẫn liên quan chặt chẽ với nhau.
Ví dụ trên sử dụng đường mờ nhỏ để tách các biểu tượng và phần văn bản. Một lần nữa cả hai liên kết với nhau bằng một đường line mỏng.
Các tam giác nhỏ
Các tam giác nhỏ có thể kết hợp với một số kỹ thuật khác, nhưng thường sử dụng những đường kẻ như ví dụ dưới đây. Có thể đảo ngược lại hình tam giác.
Dùng tam giác nhỏ khi bạn muốn gây sự chú ý đến một cái gì đó. Nó thường dùng cho các bộ sưu tập theo chiều ngang. Tam giác di chuyển khi bạn chọn các mục khác nhau
Các bài tách rời
Tôi không chắc ai đã khởi xướng nhưng nó đã trở nên phổ biến trong một đến hai năm gần đây. Đây là một giải pháp thanh lịch hơn rất nhiều so với việc dùng các đường kẻ ngang cứng nhắc.
Không nhất thiết phải là những đường răng cưa. Bạn có thể thay đổi về khoảng cách, chiều cao… Bạn cũng có thể sáng tạo những ý tưởng độc đáo mang tính cạnh tranh hơn.
The Cutoff
Ví dụ này xuất phát từ cùng một trang web, thiết kế của Colin Grist cho một websitetuyệt vời. Hãy xem cách ông phân biệt 2 phần nội dung:
Ông dùng một đường line nhưng thay vì dùng màu sắc tương phản, ông chỉ cắt bớt hình ảnh. Giải pháp đơn giản tuyệt vời và hoạt động rất tốt. Có thanh cuốn cho phần chọn bên dưới.
The Silhouette
Nó giống như giao diện sổ lưu niệm, bạn chỉ cần bỏ đường line để không gây nhàm chán. Tuy nhiên, đồ họa cần thêm nhiều hình ảnh hơn.
Tôi thật sự thích cách mà nhà thiết kế này làm với các lớp tòa nhà. Nó thật sự gây ấn tượng. Bạn có thể thử với một số hình ảnh khác như các ngọn núi, nước, cây …
Overlay
Lớp phủ là một cách khác để phân biệt hai phần nội dung một cách tinh tế. Nó trông phong cách hơn và phổ biến với cách làm mờ.
Nó có thể dễ dàng thực hiện trong Photoshop với opacity layout, nhưng sử dụng CSS thì đơn giản hơn. Hãy chắc rằng bạn sử dụng màu sắc bằng RGBa và chọn giá trị phù hợp để có sự phân chia rõ ràng.
Thủ thuật sử dụng lớp phủ cho navigation và các menu bar khác, cũng có thể cho quảng cáo và thiết kế giao diện UI. Nó thật sự là một kỹ thuật tuyệt vời cho bất kỳ dự án nào.
Thước aka
Tôi thật sự thích giao diện này và tôi sẽ dùng nó cho các dự án sắp tới. Ví dụ bên dưới dùng thước đặt theo chiều dọc.
Bạn có thể sử dụng kỹ thuật này như một yếu tố tĩnh đơn giản nhưng thiết kế này đã làm được tốt hơn. Sử dụng như một navigation.
Ví dụ có một kỹ thuật tốt, đơn giản bằng những điểm ngang. Nếu bạn muốn một thiết kế đơn giản, cách tốt nhất là chia bằng một line nhỏ. Còn gì dễ dàng hơn nữa?
Slice
Tôi đã suy nghĩ không biết gọi thiết kế này là gì nhưng trông nó rất tuyệt.
Có một số biến thể của ý tưởng này. Cơ bản đều là bổ sung phần nội dung và một số vị trí đánh bóng. Nó sẽ trở nên hoàn hảo hơn nếu bạn thêm vào một chút sáng tạo.
Kitchen Sink
Nếu đây là thiết kế giúp ích cho dự án của bạn, hãy nhớ rằng bạn có thể sử dụng một trong các thủ thuật.
Cũng như những thiết kế khác, tôi nghĩ thiết kế trên là một ví dụ tốt trong việc kết hợp nhiều phương pháp nhưng vẫn hấp dẫn và không quá rối. Chúng ta có thể thấy sự tương phản trong mày sắc, lớp phủ, những line đơn giản và scrapbook, tất cả đều trên cùng một thiết kế.
Các thiết kế nhất quán và lặp đi lặp lại và bạn không chỉ dùng cho mỗi phần khác nhau.
Kết luận
Mười ví dụ về việc tách nội dung có vẻ đơn giản nhưng tôi tin nó sẽ giúp ích cho bạn.
Hãy cho chúng tôi biết bạn thường sử dụng kỹ thuật nào trong các thiết kế của bạn.
Vì bạn đang hài lòng với công việc hiện tại và chưa có nhu cầu gặp họ? Không hoàn toàn đúng.
Việc Headhunter liên lạc với một người không liên quan nhiều tới nhu cầu chuyển việc của người đó mà chỉ nói lên “độ nóng” hay giá trị của họ trong thị trường tuyển dụng cao cấp.
Và giá trị thị trường hiện tại có ảnh hưởng rất nhiều đối với các cơ hội sẽ đến với bạn trong tương lai, khi bạn thực sự mong muốn một bước chuyển nghề nghiệp nhưng lại hơi trễ để gia tăng giá trị thị trường.
Thường xuyên làm việc với các Headhunter hàng đầu Việt Nam tại cổng thông tin Anphabe Top Headhunt, xin chia sẻ với bạn vài cách gia tăng giá trị thị trường như sau:
1.
Bạn biết ai? Kiến thức và khả năng của bạn tỷ lệ thuận với tổng kiến thức và khả năng của tất cả mọi người bạn có thể liên hệ tới. Vì thế hãy có ý thức thường xuyên mở rộng network tới các mối quan hệ chuyên nghiệp và giá trị.
2.
Ai biết bạn? Muốn ai đó biết về mình, chúng ta nên chủ động xây dựng quan hệ từ trước chứ đừng chờ đến khi cần mới lo vun đắp. Thống kê từ các Headhunter cho thấy 80% sẽ gọi những người họ đã biết, đã gặp để chia sẻ cơ hội hoặc nhờ giới thiệu; chỉ 20% là sẽ "săn tìm" các mối liên lạc mới.
3.
Họ biết gì về bạn? Bạn cần có chiến lược để "PR bản thân" một cách chuyên nghiệp và hợp lý. Thường xuyên cập nhật profile với các thành tựu nổi bật; tích cực chia sẻ kiến thức tại các diễn đàn phù hợp hay chủ động vun đắp sự thấu hiểu với các mối quan hệ chuyên nghiệp quan trọng sẽ giúp bạn định vị bản thân và gia tăng giá trị thị trường tốt hơn.
Tôi chắc chắn rằng những đầu tư nhất định hôm nay sẽ mở ra rất nhiều cơ hội mới cho bạn trong tương lai.
I hear a lot of people talking about the importance of sketching when designing or problem-solving, yet it seems that very few people actually sketch. As a UX professional, I sketch every day. I often take over entire walls in our office and cover them with sketches, mapping out everything from context scenarios to wireframes to presentations.
My desk.
Although starting a prototype on a computer is sometimes easier, it’s not the best way to visually problem-solve. When you need to ideate website layouts or mobile applications or to storyboard workflows and context scenarios, sketching is much more efficient. It keeps you from getting caught up in the technology, and instead focuses you on the best possible solution, freeing you to take risks that you might not otherwise take.
Many articles discuss the power of sketching and why you should do it, but they don’t go into the how or the methods involved. Sketching seems straightforward, but there are certain ways to do it effectively. In this article, we’ll cover a collection of tools and techniques that I (and many other UX and design folks) use every day.
(Smashing’s note: Subscribe to the Smashing eBook Library and get immediate unlimited access to all Smashing eBooks, released in the past and in the future, including digital versions of our printed books. At least 24 quality eBooks a year, 60 eBooks during the first year. Subscribe today!)
Sketching ≠ Drawing
Some of the most effective sketches I’ve seen are far from perfect drawings. Just like your thoughts and ideas, sketches are in a constant state of flux, evolving and morphing as you reach a potential solution. Don’t think that you have to be able to draw in order to sketch, although having some experience with it does help.
Sketching is an expression of thinking and problem-solving.
It’s a form of visual communication, and, as in all languages, some ways of communicating are clearer than others.
Sketching is a skill: the more you do it, the better you’ll get at it.
When evaluating your sketches, ask yourself, “How could I better communicate these thoughts?” Getting caught up in evaluating your drawing ability is easy, but try to separate the two. Look at your sketch as if it were a poster. What’s the first thing that’s read? Where is the detailed info? Remember, the eye is drawn to the area with the most detail and contrast.
Just as one’s ability to enunciate words affects how well others understand them, one’s ability to draw does have an impact on how communicative a sketch is. The good news is that drawing and sketching are skills, and the more you do them, the better you’ll get.
OK, let’s get started.
Work In Layers
Often when I’ve done a sketch, the result looks more like a collage than a sketch. Efficiency in sketching comes from working in layers.
Quick video showing how you can use layers to effectively build your sketches.
TECHNIQUE
Start with a light-gray marker (20 to 30% gray), and progressively add layers of detail with darker markers and pens.
WHY?
Starting with a light-gray marker makes this easy. It allows you to make mistakes and evaluate your ideas as you work through a problem. Draw a crooked line with the light marker? No big deal. The lines will barely be noticeable by the time you’re finished with the sketch.
As the pages fill up with ideas, go back in with a darker marker (60% gray) or pen, and layer in additional details for the parts you like. This is also a great way to make a particular sketch pop beside other sketches.
Sketching in layers also keeps you from getting caught up in details right away. It forces you to decide on the content and hierarchy of the view first. If you are sketching an interface that contains a list, but you don’t yet know what will go in the list, put in a few squiggles. Later, you can go back in and sketch a few options for each list item and append them to the page.
CAUTION
If you start drawing with a ballpoint pen and then go in later with a marker, the pen’s ink will likely smear from the alcohol in the marker.
As you get more confident in your sketching, you will become more comfortable and find that you don’t need to draw as many underlays. But I still find it useful because it allows you to experiment and evaluate ideas as you sketch.
Loosen Up
TECHNIQUE
When sketching long lines, consider moving your arm and pen with your shoulder rather than from the elbow or wrist. Reserve drawing with your wrist for short quick lines and areas where you need more control.
WHY?
This will allow you to draw longer, straighter lines. If you draw from the elbow, you’ll notice that the lines all have a slight curve to them. Placing two dots on the paper, one where you want the line to start and one where you want it to end, is sometimes helpful. Then, orient the paper, make a practice stroke or two, and then draw the line. If you look closely, you’ll see this in the video above.
A bonus to drawing from the shoulder is that much of the motion translates to drawing on a whiteboard; so, in time, your straight lines will be the envy of everyone in the room.
Play To Your Strengths
TECHNIQUE
Rotate the page before drawing a line in order to draw multiple angles of lines more easily.
WHY?
Very few people can draw lines in all directions equally well. Rotating the page allows you to draw a line in the range and direction that works best for you. Don’t try to draw a vertical line if you find it difficult; rotate the page 90 degrees, and draw a horizontal one instead. It’s super-simple but amazingly powerful.
CAUTION
This does not translate well to a whiteboard, so you’ll still need to learn to draw vertical lines.
Sketching Interactions
TECHNIQUE
Start with a base sketch, and then use sticky notes to add tooltips, pop-overs, modal windows and other interactive elements.
WHY?
Using sticky notes to define tooltips and other interactive elements lets you quickly define interactions and concepts without having to redraw the framework of the application. They are easy to move around and can be sketched on with the same markers and pens you are already using.
Define multiple interactions on one sketch, and then strategically remove pieces one at a time before scanning them in or copying the sketch.
Use different colors to represent different types of interaction.
Is one sticky note not big enough for your modal window? Add another right next to it.
Is one sticky note too big for your tooltip, user a ruler as a guide to quickly rip the note down to size.
Explore a variety of interactions and ideas in a single sketch using sticky notes.
Upon photocopying various versions of a sketch, each with different sticky notes, you’ll end up with various distinct sketches.
Copying And Pasting For The Real World
At times, you may want to manually redraw a UI element multiple times in a sketch. This is not always a bad thing, because it gives you the opportunity to quickly iterate and forces you to reconsider your ideas. That being said, an all-in-one scanner or photocopier could dramatically increase your efficiency.
TECHNIQUE
Use a photocopier to quickly create templates from existing sketches or to redraw an area of a sketch.
WHY?
A photocopier is the old-school version of Control + C, Control + V. It makes the production of templates and underlays more efficient. It also boosts your confidence, because if you mess up (and you will mess up), you can easily fix it.
Does one part of your interface need to be consistently redrawn in multiple sketches? Run a few copies, and then sketch directly on the print-outs.
Did you mess up a part of the sketch? No problem. Cover up that portion of the sketch with a piece of paper or with correction fluid, run off a copy, and then start sketching directly on the print-out.
Are you working on a mobile project? Or do you want to make a series of sketches all of the same size? Create a layout and copy off a few rounds of underlays. Easier yet, print off underlays of devices or browsers; a good selection can be found in the article “Free Printable Sketching, Wireframing and Note-Taking PDF Templates.”
Do you want to change the layout of a sidebar in your last five sketches? Sketch the new sidebar, run off a few copies, and then tape the new sidebars over the old ones. It’s that easy.
To use a sketch as an underlay of another similar one, adjust the density or darkness setting on your photocopier to run a copy of the sketch at 20% of it original value.
Another advantage to photocopies is that marker will not smear on a print-out the way a ballpoint pen does. So, whenever you have an area of a sketch to highlight or add color to, run a few copies first.
CAUTION
Paper cuts.
Sketching over a photocopy of the original to reevaluate the sidebar.
The final sketch. Notice how the sidebar and its detail are darker than the photocopy. This is intentional, because it allows you to explore ideas in the context of the overall design.
The Design Is In The Details
Use a ruler; specifically, a quilting ruler. Quilting rulers are translucent and are normally printed with a ⅛″ grid screen, letting you see the line you’re drawing relative to the rest of the sketch.
TECHNIQUE
Use a ruler and a light-gray marker to draw an underlay for a detailed sketch.
WHY?
This lets you quickly draw a series of lines that are offset a set distance from each other. This works great for elements such as lists items, charts, buttons and anything else that needs to be evenly spaced. It’s like an analog version of “smart guides.”
Quickly creating evenly spaced lines with a quilting ruler and 30% gray marker.
TECHNIQUE
After using a light-gray marker to lay out a sketch, use a ruler and ballpoint pen or black marker to finalize it.
WHY?
When sketching in layers, you want the final design or layout to “pop.” A ruler enables you to be more precise in detailed areas and ensures that long edges are straight.
There is no shame in using a ruler. The key is knowing when to use it. Don’t start sketching with a ruler; rather, bring one in when you need the detail and precision. Remember, you’re sketching, not drawing.
Using a ruler to make sections of a sketch drawn with a 70% gray marker pop.
TECHNIQUE
Use a ruler to quickly rip paper or sticky notes by firmly holding the paper with one hand and ripping away the edge with the other hand.
WHY?
It’s quicker then grabbing scissors; you already have the ruler with you; and you can take it through airport security.
After lightly sketching an interface with a light marker, finalize it or make one area pop by using a ruler to lay down darker lines.
Ripping a sticky note with a ruler.
Tell The Whole Story
TECHNIQUE
Draw the application in the context of where and how it being used, or frame it with the device it will be used on.
WHY?
This forces you to think about the environment that the application will be used in, instills empathy for your users, and establishes understanding of the challenges unique to this application.
I get it. No one wants to sketch out a monitor every time they draw a wireframe. I’m not saying you have to, but a few sketches with context go a long way. Especially with mobile devices, the more context you add to a sketch, the better. Moreover, I always sketch the device for a mobile interface as an underlay, and I often try to sketch the UI at full scale. This forces you to deal with the constraints of the device and makes you aware of how the user may be holding the device.
CAUTION
Drawing the surrounding environment can be challenging and requires a higher level of sketching competency. Don’t let this intimidate you. If you’re not comfortable sketching the environment or you find it takes too long, use a picture as an underlay instead.
Sketching ideas for a mobile application in the context of where it will be used.
Ditch The Sketchbook
TECHNIQUE
Draw on 8.5 × 11″ copy paper.
WHY?
Sketches are for sharing. You can easily hang 8.5 × 11″ sheets on a wall to share ideas with others or to see a project in its entirety. When you need to save a sketch or two, you can easily batch scan them into a computer without ripping them out of the sketchbook. Still not convinced? Copy paper is cheaper; it allows you to use sketches as underlays without photocopying; and you don’t have to choose between book-bound or spiral-bound.
One of the many walls of sketches in our office.
What Are You Waiting For?
Sketching is not reserved for designers. Developers, project managers and business analysts can get in on the fun, too. It’s the best way for teams to quickly communicate, explore and share ideas across disciplines. Also, I’ve found that others are more receptive to give feedback and make suggestions when shown sketches than when shown print-outs or screenshots.
Remember, it’s about getting ideas out, reviewing those ideas and documenting them, not about creating a work of art. When evaluating your sketches, ask yourself, “How could I better communicate these thoughts?” Getting caught up in evaluating your drawing ability is easy, but try to separate the two, and know that the more you do it, the better you’ll get.
It’s worth repeating that sketching is the quickest way to explore and share thinking with others. It focuses you on discovering the best possible solution, without getting caught up in the technology.
Go for it! Don’t get caught up in the tools. Make a mess. And have fun!
Tools
Here are links to some of the tools described in this post.
Tìm hiểu và nắm bắt hành vi người dùng là một phần không thể thiếu với một công ty thành công
Mỗi khi nhắc đến trường Stanford, chúng ta thường nghĩ về nơi đào tạo ra nhiều thiên tài toán học và khoa học máy tính. Những người mà khi ra trường có thể kiếm được hàng tỷ đôla, sáng lập hay làm việc cho những công ty hàng đầu như Google hay Apple. Nhưng không chỉ có vậy, Stanfrod còn có chương trình nghiên cứu về thiết kế (design) cho tất cả các ứng dụng công nghệ của các công ty danh tiếng. Thiết kế sản phẩm (hay ứng dụng) ngày càng đóng vai trò quan trọng khi nó thể hiện cho năng lực phục vụ khách hàng của sản phẩm đó.
Có lẽ không ai có tầm ảnh hưởng đến những người thiết kế UX (user experience) lớn như BJ Fogg – một nhà nghiên cứu tại Stanford. Là người sáng lập Persuasive Technology Lab tại Stanford, ông tập trung vào nghiên cứu “những phương pháp tạo thói quen, những nguyên nhân tạo nên hành vi, tự động thay đổi hành vi và cách thuyết phục mọi người qua điện thoại di động”. Ngoài việc chính là nguyên cứu, Fogg cũng đặc biệt quan tâm đến sự phát triển sức khỏe con người.
Tại hội nghị thiết kế Warm Gun ở San Francisco mới đây, Fogg đã chắt lọc những gì tốt nhất từ những nghiên cứu, bài giảng ở Stanford và hai ngày ở Persuation Boot Camps của mình thành một cuộc nói chuyện cực kỳ bổ ích trong vòng nửa giờ đồng hồ. Tuy phần của Mike Krieger, đồng sáng lập Instagram và cựu học sinh của Fogg hơi khó hiểu một chút nhưng nhìn chung, cuộc nói chuyện với nội dung “Mô hình Hành vi của Fogg” đã làm “ngất ngây” 500 nhà thiết kế và phát triển.
Nói một cách dễ hiểu, mô hình của Fogg có sự tính rõ ràng của thuyết tương đối. Mô hình này được thể hiện bằng công thức b=mat. Trong đó, hành vi người dùng (b: behavior) là kết quả của ba yếu tố: động lực (m: motivation), năng lực thực hiện công việc của người dùng (a: ability) và một ngòi nổ (t: trigger), tất cả các yếu tố trên phải được xuất hiện cùng lúc. Nói thêm về “ngòi nổ t”, nếu bạn có ngòi nổ nhưng nó…không nổ, hay nói cách khác là nó chẳng tác động gì đến người dùng, thì đó là “ngòi nổ lạnh” (cold trigger), và tất nhiên là bạn không muốn nó. Thứ bạn muốn là một “ngòi nổ nóng” (hot trigger), thứ có thể dễ dàng tác động đến người dùng. Những loại hành vi khác nhau (Fogg có tận 15 loại!) được cấu thành từ ba yếu tố trên nhưng với “liều lượng” khác nhau. Tuy vậy về cơ bản, nguyên lý hoạt động của chúng là nếu động lực của người dùng đủ lớn (m đủ lớn), họ sẽ sẵn lòng làm thứ gì đó khó hơn và vượt quá khả năng của họ (a nhỏ), tất nhiên là kèm theo một ngòi nổ t hiệu quả nữa. Tương tự như vậy, nếu công việc đó dễ dàng(b nhỏ)và người dùng giỏi (a lớn) thì động lực cho họ làm công việc đó chẳng cần nhiều, với điều kiện là phải có “ngòi nổ” hiệu quả.
Những điều này rất giống với khái niệm “Quy luật vàng UX” của Scott Jenson. Ông cho rằng Giá trị > Hình phạt (Value > Pain) và có thể được thể hiện qua biểu đồ dưới đây:
Có hai điều quan trọng mà Fogg chia sẻ. Thứ nhất, như bạn thấy ở biểu đồ, một “ngòi nổ” phải nằm phía trên “Action line” thì mới có thể coi là hiệu quả. Làm cho ai đó làm một việc vượt quá khả năng của họ là cực kỳ khó và cứ cố thúc ai đó làm điều họ không muốn thì chỉ có làm họ thấy phiền phức. Thứ hai, biểu đồ không thể hiện một sự thật về bản chất con người: sẽ hiệu quả hơn rất nhiều nếu như bạn làm công việc đó dễ đi (tăng a) hơn là cứ cố tạo động lực cho ai đó.
Ý nghĩa của điều thứ hai đề cập phía trên là cách làm gặp ít khó khăn nhất là làm công việc trở nên dễ thực hiện hơn. Phần lớn những app thành công đều tạo thói quen mới cho người dùng bằng cách biến điều họ muốn làm (hoặc đang làm) trở nên dễ dàng hơn. Fogg chia bảng hành vi của mình thành 3 hàng: các chấm (dot) hành vi, các đoạn hành vi (span) và các đường (path) hành vi. Những chấm hành vi là những hoạt động chỉ làm một lần, các đoạn hành vi xảy ra trong thời gian dài và đường hành vi là thói quen mới mà người dùng sẽ có từ giờ trở đi. Bảng này có 5 cột: Hành vi mới (xanh lá cây), hành vi đang có (xanh nước biển), hành vi bạn muốn tăng cường (tím), hành vi bạn muốn giảm (xám) và những hành vi bạn muốn ngăn chặn (đen).
Những app thành công nhất, ví dụ như Instagram, khai thác cái Fogg gọi là những hành vi “đường xanh nước biển” (“blue path” behaviors). Người dùng đã chia sẻ ảnh trực tuyến, nhưng Instagram đã làm công việc đó trở nên dễ dàng hơn (tăng a), thú vị hơn (tăng m) và khéo lé đưa “ngòi nổ t” – các yếu tố xã hội vào (xem được ảnh của bạn bè trên Facebook chẳng hạn) nhằm làm tăng sự gắn kết với người dùng. Khi một app trở nên cực kỳ thành công, công ty sẽ chú ý tới hành vi “đường màu tím” (“purple path” behaviors) với mục đích tương tác nhiều hơn với khách hàng. Trong cuốn sách Behavior Wizard (tạm dịch là Phù thủy Hành vi), Fogg chỉ ra cách bạn đạt được hành vi “đường màu tím” như sau:
Tăng số lượng ngòi nổ (t) dẫn tới hành vi bạn mong muốn
Tăng khả năng(a) thực hiện hành vi của khách hàng (làm công việc trở nên dễ dàng hơn)
Tăng cường động lực (m) để thực hiện hành vi với các động lực bên trong (khích lệ người dùng bằng lời khen, danh hiệu, v.v..) hay bề ngoài (phần thưởng thực).
Và nếu bạn nhìn cách mà Instagram dần dần thêm các tính năng cho sản phẩm, bạn sẽ thấy rằng họ đều trả lời các câu hỏi sau: liệu tính năng này có làm người dùng chụp và chia sẻ nhiều ảnh hơn không? Nó có giúp quá trình ấy dễ dàng hơn hay nhanh hơn không? Nó có làm người dùng và bạn bè họ thấy thú vị hay không?
Dưới đây là một video của Lily Cheng – một cộng sự của Fogg tại Stanford. Cô miêu tả cách newsfeed của Facebook đưa những “ngòi nổ nóng” tới những người dùng một cách hiệu quả (khuyến khích được người dùng tương tác với “ngòi nổ” này). Đây là một việc rất quan trọng vì nó sẽ tạo ra những thói quen cho người dùng.
Phương pháp này rõ ràng đã chứng minh được tính hiệu quả. Như Fogg đã nói: “Facebook, Twitter, Google, những công tu này đang sử dụng máy tính để tác động tới hành vi của chúng ta”. Nhưng cách họ thực hiện điều đó lại chẳng liên quan gì đến máy tính. “Mảnh ghép còn thiếu không phải về mặt công nghệ, đó là tâm lý học” – Fogg nói. “Chúng ta đang thiếu hiểu biết về hành vi con người”. Câu hỏi đặt ra cho Fogg là chúng ta sẽ làm gì khi có trong tay những hiểu biết này?
Mối quan tâm của tôi là làm thế nào để kết nối việc chúng ta ngày càng hiểu biết hơn về những công cụ thay đổi hành vi với những khoản đầu tư ngắn hạn (thường từ 6 tháng đến 1 năm) của các nhà đầu tư. Thường những nhà đầu tư sẽ chọn những công ty xác định được những vấn đề dễ dàng (ví dụ như làm sao để người dùng chia sẻ ảnh nhiều hơn), và giải quyết các vấn đề đó theo cách hiệu quả, thú vị (như Instagram) và giảm thiểu những phần thật sự khó trong cách giải quyết đó – Frogg chia sẻ. Ông cũng nói rằng để làm một app thành công, bạn nên bắt đầu từ việc phát triển và tăng cường số lượng các ngòi nổ (tăng t), sau đó tăng khả năng thực hiện (tăng a) bằng cách biến công việc đó trở nên dễ dàng hơn và nhanh hơn. Bạn chỉ nên cố tăng động lực (tăng m) khi không thể làm gì khác nữa – bởi đó sẽ là điều khó nhất bạn làm.
Nhưng nếu bạn theo cách suy nghĩ của CodeAcademy (với 2 đồng sáng lập Zach Sims và Ryan là cựu sinh viên trường Columbia, không phải Stanford) bạn sẽ thấy việc tăng động lực (m) là chìa khóa để người dùng tiếp nhận những thói quen mới một cách tự nhiên bởi vì sẽ rất khó làm thay đổi các hành vi loại này. Những nhà đầu tư ở các công ty công nghệ cần biết rằng những người phát triển sản phẩm đang phản ứng lại các ngòi nổ của họ và cố gắng thúc đẩy sự đầu tư từ bên ngoài bằng cách làm vấn đề trở nên dễ dàng hơn. Phương pháp của Fogg có thể dùng cho những mục đích bền vững hơn là đơn thuần để tăng traffic, nhưng những nhà phát triển, và cả những nhà đầu tư, họ cần động lực đủ lớn để thay đổi hành vi của mình.
Lời người viết:
Trước hết, để thay đổi hành vi của developer trong nội tại công ty, bạn phải có động lực đủ mạnh (theo CodeAcademy). Sau đó, để thay đổi hành vi của người dùng và hướng đến những mục tiêu bền vững hơn, bạn hay theo phương pháp của Fogg. Sự kết hợp này có thể sẽ giúp công ty bạn phát triển theo hướng tích cực và lâu dài.
Làm thế nào để nắm bắt được các ý tưởng mới, làm sao để xây dựng được một sản phẩm mới hiệu quả
1. Design thinking là phương pháp hướng về con người
Design Thinking tập trung vào con người/ khách hàng với nhu cầu của họ chứ không phải một loại công nghệ hay một số điều kiện nào đó khác.
Do đó những phương pháp của Design Thinking bao gồm quan sát, phỏng vấn, brainstorm, xây dựng sản phẩm mẫu (prototype)...
Sự sáng tạo từ việc kết hợp giữa kinh doanh, công nghệ và con người này đã dẫn đến những cải tiến vượt bậc.
Người dùng chính là người quyết định liệu một sản phẩm hay dịch vụ có nên tồn tại hay được ra mắt hay không.
2. Design Thinking là một quy trình học hỏi có tính tương tác
Trong bất cứ giai đoạn nào của dự án, các nhóm áp dụng Design Thinking đều làm việc với cách tiếp cận tương tác: Xác định lại vấn đền, tìm ra nhu cầu, lên ý tưởng, xây dựng sản phẩm mẫu (prototype), kiểm chứng với người dùng.
Cách tiếp cận tương tác này giúp các nhóm đó hiểu sâu hơn nhu cầu của con người và đem lại nhiều kết quả khác nhau.
3. Dự án áp dụng Design Thinking gồm các giai đoạn phân tán và tập trung
Design Thinking cho phép các thành viên trong nhóm suy nghĩ theo nhiều hướng đa dạng.
Kết quả từ những tư duy đa dạng đó sẽ xây dựng nên nền tảng cho một kết quả mang tính tập trung.
Design Thinking là phương pháp có cấu trúc với những điểm mốc được xác định rõ ràng theo thời gian của dự án.
Thông thường các dự án được xây dựng dựa trên một mục tiêu đã được vạch ra từ đầu. Ngược lại, các dự án theo kiểu Design Thinking sẽ có rất nhiều kết quả nhập nhằng được đưa ra cho đến khi nó đi đến giai đoạn cuối cùng trong quy trình của Design Thinking.
4. Design Thinking là "xây dựng sản phẩm mẫu"
Tính xác thực, được trải nghiệm và thử nghiệm của các kết quả đưa ra chính là những điểm cơ bản chính yếu của Design Thinking.
Các sản phẩn mẫu (prototypes) cho phép người dùng cuối tham gia từ rất sớm vào quá trình sáng tạo..
Trực giác cho phép chúng ta sớm nhận ra những thử thách phức tạp.
Vậy Design Thinking phù hợp với những ai?
Cho tất cả những công ty muốn giải quyết các thử thách sau...
Phát triển một sản phẩm mới và tạo ra các sản phẩm mẫu
Design Thinking là gì, và nó có ích lợi như thế nào đối với các startup tại Việt Nam?
Trước khi bàn đến “Design Thinking”, phải hiểu đúng Design là gì. Design được dịch ra tiếng Việt là “Thiết kế”. Bản thân từ này có nội hàm khá rộng nhưng khi được chuyển ngữ và ứng dụng trong hoàn cảnh Việt Nam đã được đơn giản hóa đi nhiều. Một cách tổng quát, “Thiết kế” nên được hiểu là quá trình đưa ý tưởng vào hiện thực. Hiện thực hóa ý tưởng về một ngôi nhà là một bản vẽ kiến trúc, phối cảnh, hiện thực hóa ý tưởng về thông điệp là một bản in poster, một chiếc banner quảng cáo, hiện thực hóa ý tưởng về một trang web là giao diện,... Tất cả những thành phẩm tạo ra là kết quả của quá trình người làm thiết kế biến những thứ trừu tượng thành một thứ rõ ràng hơn, có thể sử dụng được.
Vậy Design Thinking là gì? Theo Tim Brown - CEO của IDEO, người khởi xướng ra thuật ngữ Design Thinking - thì Design Thinking là một phương thức sử dụng sự nhạy cảm và cách tư duy thiết kế trong giải quyết các vấn đề có ý nghĩa với con người. Tổng quát lại, Design Thinking có thể coi là một hệ thống các tư tưởng kết hợp tư duy sáng tạo và phân tích trong việc giải quyết một vấn đề cụ thể nào đó. Điểm đáng chú ý ở đây là Design Thinking có 2 phần rõ rệt: Sáng tạo và Phân tích. 2 thành phần này cho phép các thông tin và ý tưởng đến từ 2 chiều, cả những dữ liệu, kinh nghiệm trong quá khứ, lẫn những thứ chưa xảy ra đòi hỏi sự tưởng tượng.
Để rõ ràng hơn, xin lấy một ví dụ điển hình về “Design Thinker”, đó là nhà bác học Thomas Edison. Ai cũng biết ông là người đã tạo ra chiếc bóng đèn điện nhưng ít người biết chính ông cũng là người đã phát triển hệ thống mạng lưới phát điện cũng như truyền tải điện. Rõ ràng không có hai thứ đó thì chiếc bóng đèn sẽ trở thành vô dụng. Thiên tài của Edison nằm ở chỗ ông có khả năng hình dung rõ ràng người dùng muốn gì, cần gì và sẽ sử dụng những phát minh của ông như thế nào (Nghe có vẻ giống Steve Jobs đúng không). Vì vậy ông xây dựng mọi thứ xoay quanh những nhu cầu đó, giải quyết cụ thể vấn đề người dùng đang mắc phải bằng cả một hệ thống chứ không phải chỉ là những phát minh đơn lẻ, rời rạc, chắp vá.
Cách tiếp cận của Edison chính là một ví dụ điển hình của cái mà chúng ta ngày nay gọi là “Design Thinking”. Nếu coi Design Thinking là một phương pháp thì phương pháp này đề cao sự đổi mới, thiết kế ra những sản phẩm lấy con người làm trung tâm. Tim Brown cho rằng:
Sáng tạo cần được thúc đẩy bằng sự thấu hiểu, trực quan những gì mọi người muốn và cần trong cuộc sống, những gì mọi người thích và không thích về cách những sản phẩm cụ thể được làm ra, đóng gói, tiếp thị, bán hàng hay hỗ trợ.
Bên cạnh những phát minh, điều vĩ đại nhất Edison đã làm đó là đã gây dựng thành công mô hình phòng thí nghiệm R&D hiện đại đề cao phương pháp thực nghiệm. Edison không phải là một nhà khoa học chuyên ngành hẹp nhưng là một người có kiến thức rộng lớn với độ nhậy cảm về kinh doanh đáng kinh ngạc. Phòng thì nghiệm của ông ở Menlo Park, New Jersey chưa đầy rẫy những người tiên phong, dám thử nghiệm không nề hà gì cả. Trong thực tế, chính ông đã phá vỡ khuôn mẫu của các nhà phát minh thiên tài đơn độc bằng cách tạo ra một cách tiếp cận sự đổi mới dựa theo nhóm cộng sự. Các cuốn sách hay bài báo viết về Edison thường hay trích dẫn lời của ông “Thiên tài chỉ có 1% là cảm hứng còn 99% là mồ hôi.”. Thật ra đây chính là câu nói thể hiện tư tưởng nghiên cứu phát triển sản phẩm của ông và cũng phản ánh tính thực tế, thử sai của Design Thinking.
Vậy nhìn vào những con người như Thomas Edison, Steve Jobs, một Design Thinker sẽ có những cá tính như thế nào? Theo Tim Brown, không cần phải là những người học chuyên ngành về thiết kế mới có tư duy kiểu Design. Sự phát triển đúng đắn kết hợp với trải nghiệm hợp lý có thể khai mở kiểu tư duy này. Sau đây là 5 cá tính theo Tim là đặc trưng nhất:
Sự đồng cảm: Nghe có vẻ lạ lẫm phải không? Đơn giản là các Design Thinker có thể nhìn thế giới bằng nhiều góc nhìn khác nhau. Họ có thể nhìn dưới quan điểm người dùng, nhà phát triển, nhà cung cấp, nhân viên bán hàng,... kể cả ở dạng hiện có lẫn tiềm năng. Bằng việc đặt con người ở vị trí cao nhất, Design Thinker có thể mường tượng ra các giải pháp hấp dẫn, phù hợp với các nhu cầu đặc thù nhất. Họ có thể quan sát cả thế giới trong phút chốc, chú ý đến những chi tiết mà nhiều người không để ý, sử dụng chúng để thúc đẩy sự đổi mới.
Tư duy tích hợp: Như đã nói, Design Thinking không phải chỉ dựa vào quá trình suy luận thông thường dựa trên lịch sử kinh nghiệm cũng như dữ liệu (thường là chỉ mang đến các lựa chọn giới hạn). Design Thinker còn tưởng tượng và tìm cách đưa vào các khả năng tiềm ẩn khi đối diện với các vấn đề, thậm chí đưa ra những giải pháp kỳ quái để cải tiến những thứ sẵn có.
Lạc quan: Chính vì quá trình suy nghĩ theo kiểu “Design” này không chừa ra bất kỳ khả năng nào, và trí tưởng tượng con người thì là vô hạn, nên dù là vấn đề khó đến đâu, họ luôn nghĩ có giải pháp tốt hơn.
Chủ nghĩa thực nghiệm: Các sáng tạo đột phá không nhiều khi đến từ những sửa đổi nhỏ theo hướng có sẵn. Design Thinker đặt ra các câu hỏi và tìm cách khai phá đến tận cùng ngõ ngách theo tất cả các hướng có thể. Phương pháp này đòi hỏi không cách nào khác đó là phải thử, đôi khi là thử theo những hướng hoàn toàn ngược lại và không liên quan gì với hiện tại.
Sự cộng tác: Các sản phẩm và dịch vụ càng ngày càng phức tạp, dù là thiên tài thì cũng khó có thể tự một mình làm mọi thứ được. Design Thinker hiểu rằng mỗi người đều có những góc nhìn khác nhau, trải nghiệm khác nhau, và sự kết hợp đó sẽ mang lại các giải pháp không ngờ đến, vượt ngoài tầm nhìn của một cá nhân đơn lẻ.
Vậy đối với Startup, ứng dụng Design Thinking như thế nào? Thực tế thì Design Thinking từ khi được khởi xướng và nổi lên, hay được mang vào ứng dụng ở các công ty lớn, như là một phần của quá trình đổi mới cũng như sáng tạo. Tuy nhiên ở bài viết này, Pandora.vn muốn đặt trong ngữ cảnh của các công ty quy mô nhỏ và startup. Có 2 điểm, Pandora.vn muốn nhắc lại cho rõ ràng:
Design Thinking gồm 2 phần: phân tích và sáng tạo. Vì vậy cách tư duy khá cân bằng, nhìn vào kinh nghiệm, dữ liệu để làm căn cứ nhưng cũng để ngỏ tất cả các phương án sáng tạo. Lý luận đơn thuần không có nhiều chỗ cho tưởng tượng, và tưởng tượng bay bổng cũng không có đất cho số liệu thực tế. Vì vậy hãy cân bằng cả 2.
Design Thinking lấy con người làm trung tâm. Điều đó có nghĩa là cách tiếp cận không phải kiểu, bây giờ chúng ta có công nghệ này, làm gì với nó bây giờ? Hay như, công ty X đang làm trò Y có vẻ hay hay, chúng ta làm trò Y được không nhỉ? Hoàn toàn không phải như vậy. Design Thinking lấy con người làm đối tượng chính để từ đó đưa ra các giải pháp để giải quyết vấn đề cụ thể nào đó.
Về lý thuyết thì quy trình của Design Thinking gồm các bước sau (có nhiều cách gọi tên các bước):
Nhưng thực tế, sự quay vòng còn có thể nhanh hơn nữa, ngay bước sau có thể cần phải quay lại bước trước để điều chỉnh.
Hãy thử điểm qua các bước xem trong quá trình phát triển sản phẩm, các startup có thể làm gì.
Understand: Đây đơn giản là quá trình thu thập thông tin để có được những thông tin cơ bản về vấn đề startup muốn giải quyết. Google, hỏi trực tiếp, phỏng vấn,... là những cách phổ biến. Các bạn làm startup sẽ nhận ra mình mong muốn thấu hiểu người dùng, thấu hiểu sự việc đến mức nào khi cứ hỏi đi hỏi lại những người xung quanh về vấn đề nào đó, đến khi họ phát cáu thì thôi. Nhưng cuối cùng của bước này là gì? Thật ra bạn chẳng nhận được câu trả lời nào cả, mà chỉ dấy lên hàng trăm câu hỏi khác mà Google cũng như những người xung quanh không trả lời được. Đó là lúc bạn sang bước 2.
Observe: Quan sát. Đây chính là lúc cá tính “đồng cảm” phát huy. Bạn cần hiểu đối tượng còn hơn chính đối tượng. Lúc này tất cả các câu hỏi cái gì, hay làm thế nào ở bước 1 đều vô dụng. Câu hỏi đúng ở bước này là Tại sao? Tất nhiên câu hỏi Tại sao luôn là câu hỏi khó và bạn cũng sẽ nhận câu trả lời là một mớ bòng bong. Tài năng là ở chỗ làm sao trong mớ bòng bong đó, bạn có thể nhìn ra được nguyên nhân sâu xa ẩn chưa đằng sau của vấn đề là gì.
Synthesize: Đơn giản là sau khi có đủ thông tin, có đủ sự quan sát, bạn rút ra một số kết luận, vừa đủ để bạn có thể hình dung sơ bộ giải pháp của bạn là gì. Các kết luận rất chung chung, chỉ dựa trên 3 yếu tố: người dùng + nhu cầu + nguyên nhân sâu xa, bản chất. Không phải lý luận gì vĩ đại, cao siêu, thường những thứ kết luận ở bước này hết sức giản dị.
Ideate: Khi đã có những kết luận dựa trên quá trình tìm hiểu và quan sát vốn dựa vào phân tích, thì đây là lúc đòi hỏi sự sáng tạo. Với kết luận như vậy, bạn có thể nghĩ ra những ý tưởng nào? Không cần mất quá nhiều thời gian lý luận, đơn giản là vạch ra tất cả những idea có thể nhằm giải quyết kết luận bạn đưa ra ở bước trước. Cả team ngồi với nhau, brainstorming, đưa ra các phương án,...
Prototype: Chọn lấy một ý tưởng, một phương án khả thi nhất ở bước trước và làm thử. Đây là cách thực nghiệm để biến ý tưởng thành hiện thực. Bạn đừng nghĩ đây là sản phẩm cuối cùng của bạn, mà nó chỉ là một cách để kiểm tra lại ý tưởng mà thôi. Vì vậy, hãy làm thật tập trung và thật nhanh, đừng lan man. Người dùng khi nhìn vào bản prototype họ sẽ nghĩ đến tiềm năng nhiều hơn, còn nếu bạn đưa ra một sản phẩm hoa mỹ, trau chuốt, người dùng sẽ chỉ chăm chăm tìm cách bắt lỗi. Đây cũng chính là lúc bạn thu thập các phản hồi, đo đạc các số liệu,... cho bước tiếp theo.
Iterate: Lấy những thông tin thu được từ bản prototype, quay lại các ý tưởng đã đề ra, quay lại các giả thuyết và kết luận, thậm chí quay lại từ gốc của vấn đề để xem lại toàn bộ quá trình tư duy có gì không ổn, cái gì đã giải quyết được cái gì chưa,... Từ đây bạn có thể rút ra nhiều bài học. Đôi khi vấn đề không phải là ở giải pháp, mà lại ở ngay bản thân cách nhìn nhận vấn đề.
.jpg)
