ux writing Career Development

The Essential of UX Writing, and Should I Become…

ux writing ux writer

UX writing is the practice of crafting UI copy (aka microcopy) that guides users throughout a digital product (website, mobile app, digital screen menu, etc.). The primary aim of UX writing is to create a pleasant experience for the users while they interact with the UI to accomplish a specific user task. With the increasing complexity of functions and features of digital products, there is a large and growing demand for quality UX writing and writers.

Examples of UI Copy 

UI Copy are text that appears in the UI design. Their mission is to provide instructional info that explains the purposes or goals of the UI. They include but not limited to:

  • instructional text (e.g. placeholder text)
  • menu labels
  • buttons/CTA
  • links
  • error messages
  • security notes

Keep in mind that not all copies shown on the screen are considered UI Copy. For example, the description or specifications of a product from an e-commerce platform is not considered part of the UI copy. These content are usually provided by the product owner and does not fall into the responsibility of a UX writer unless specified otherwise.

Tips for Writing Better UI Copy 

Here are a few tips you can take into consideration to improve the user experience when writing UI copy:

  1. Be Concise – avoid long paragraphs and use fewer words to convey the same meaning
    Don’t: You must log in before you can write a comment
    Do: Log in to comment
  1. Be Consistent – when describing a task or action, be consistent and use the same wordings
    Don’t: “Schedule your consultation now” on one page, and “Book your consultation now” on another page
    Do: Use the word “schedule” throughout the product when describing the same task
  1. Be Current – avoid using the future tense to describe an action
    Don’t: Your bank statement has been downloaded
    Do: Bank statement downloaded
  1. Be Numeric – numbers in figure format are easier to grasp than in word format
    Don’t: You have two messages
    Do: You have 2 messages

Current Demand for UX Writer 

The role is relatively new and not a whole lot of designated jobs are available. However, the demand is definitely on the rise since people’s lives are increasingly intertwined with digital products and the demands are unlikely to decline any soon.

Ideally, a professional UX writer should be employed for the copy write-up and this role should be part of the scrum team in an agile project. The UX writer should be an integral part of the UX design process and collaborate closely with other team members such as business designer/business analysis, designers and developers. It is highly recommended that a UX writer is recruited to a project at an early stage of the product development so that issues with product usability or user flows can be identified sooner.

Should You Become a UX Writer? 

UX writing is a relatively new discipline and is a professional task that requires training and a lot of practice. As the current stage, the responsibilities may be absorbed up by an interaction designer or marketing personnel. However, if you are currently employed in a position that requires regular writing, or if you are interested in copywriting in general, now is a good time for you to extend your skill sets and portfolio into UX Writing.

Business Design Certificate in Business Design Greentomato Academy UX Design UI Design Wireframe Prototype Adobe XD Business Design

【Business Value Creation 101】Revolutionize Your Business with Business Design

Business Design Certificate in Business Design Greentomato Academy UX Design UI Design Wireframe Prototype Adobe XD

Evolution of the Corporate Strategic Innovation Methodology

In the past decades, many strategic methodologies have emerged as means for corporate strategic innovation, product value-creation and creative problem-solving.

A few that are widely recognized and adopted by the general public includes:

  • Design Thinking, taught during the 80’s at Stanford University and made popular to the corporate world by David Kelley, the founder of IDEO throughout the 90’s. It is a practical product innovation process in which satisfying the needs of the product users are emphasized.
  • User Experience Design (or UX), emerged in the 90’s as a result of the proliferation of personal computers and is brought to a wider audience by Professor Donald Norman as a process of improving the interaction and experience between the user and the product.
  • Blue Ocean Strategy, proposed by W. Chan Kim and Renée Mauborgne was a huge buzz and influential during the early 2000’s. It promotes the idea of creating new product demands by new value creation and making the existing competition irrelevant.

The first two approaches incorporate the user-centered design ideology which emphasizes learning and satisfying the needs of the product users and stakeholders. The latter approach emphasizes creating new market demands by developing innovative products and services. However, without the consideration of the commercial values, even a great offering can fail to deliver a return on innovation.

Then came Business Design, a relatively new approach to strategic value creation that has gained traction beyond 2010. The specific origin of Business Design is uncertain, but what is certain is that Business Design goes beyond its predecessor by incorporating profitable business models into the formula.

Business Design is Employed to Solve Key Business Challenges

The word ‘design’ implies problem-solving. For instance, interior design is the act of improving a living environment that could solve the habitational problems of the habitant. With this notion in mind, we could therefore comprehend that ‘Business Design’ is in fact the process of transforming a business into a more competitive state by solving its underlying business problems.

We have come to realize, with the experiences gained from attempts and failures, that it’s not merely about product innovation that makes a company successful in the marketplace. We also need to consider the business and revenue model, the operations, the marketing strategy, as well as the use of the latest available IT solutions. It’s all about blending business strategies with design and IT, all with the aim of fulfilling the needs of the stakeholders that makes a product succeed and sustainable in the marketplace.

Blending business strategies with Design and IT
Blending business strategies with Design and IT

For instance, wearable technology such as smart glasses has yet to prove its desirability. The launch of Google Glass by the tech giant in 2013 has received a great deal of backlash due to their overly optimistic assumption on the market acceptance of the product’s form-factor and pricing (US$1500). Furthermore, the feasibility of the technological execution also failed, as in the case of the battery lifespan was just not satisfactory for the product to be usable in daily life. However, we will see whether the new Enterprise Edition 2 will be able to change the perception of the market overtime.

Google Glass

This process starts off with (A) “What we don’t know / What the product could be”, followed by identifying the (B) “Actionable problem statement”, and ends with © “What we do know / What the product should be”.

4-phase business design process

This 4-phase process can be summarized as:

  1. Discover the market needs and competition by researching to obtain insights
  2. Define your project scope by analyzing insights into specific problems the project should tackle
  3. Develop multiple ideas with brainstorming to find the best possible solution
  4. Deliver your ideas into reality by making them into testable prototypes and validate your assumption

Considering Becoming a Business Designer?

If you are looking for a career development in the digital transformation industry, becoming a Business Designer would be the best place to start. Being knowledgeable in Design Thinking and UX development is definitely a must but being affluent in the process of Business Design would certainly give you extra advantages. Currently, you can find a few related courses on Design Thinking/ Business Design offered by respectable institutes such as:

At GreenTomato Academy, we also offer the Certificate in Business Design course that provides you the opportunity to be exposed to the Design Thinking and UX design methodology, as well as enabling you to learn the practical process in Business Design.

If you are Interested to know more about the Business Design course, visit our website for more course detail.

UX UI Design

WTF Is More Important than You Imagine in UX…

UX design user flowchat

When it comes to designing digital products, UX design is unquestionably one of the essential process for developing better products.

Of the many stages of the UX design process, defining the end-users’ goals, actions, and expectations via user flowchart is a crucial step in determining the functions and features of the product from the perspective of a user (remember User-Centered Design?).

Just imagine a potential customer trying to purchase a product from an online store and is required to register for a user account even though the user beliefs it will be a one-time purchase. The additional and unnecessary steps it will require the user to set up the account before he/she can proceed to purchase the item may very well drive the customer away.

For that reason, defining What’s the Flow (abbreviated as WTF in the title) from a user’s perspective, figuring out a step by-step user flow before any actual UI design is created will ensure that the product being developed will offer the right functions for the right users at the right time.

User flows are:

  • a series of steps a user takes to achieve a meaningful goal
  • used to communicate the intended flow of a user through various pages and actions in an app or website
  • visual diagrams with description of what happens at each step

Benefits of Drawing User Flow Chart

  1. Ease of Presentation and Communication
    Provide a step-by-step view of how the interface is intended to work (e.g. purchase, log in, sign up, etc.). Allowing product owner or teammates to visualize the user flow in the most efficient form.
UX design user flowchat
Visualizing the user login flow, making steps easy to understand
  1. Evaluate Task Flow for Improvement
    Enhance the ease of flow by evaluating and eliminating unnecessary steps, thereby improving efficiency of the interface and enhancing user conversion rate (e.g. registering an account or purchasing a product).
UX design user flowchat
Validating an email address and password can be done in one step
  1. Create an Intuitive Interface for Users
    Helps to identify weaknesses in the user flow and see what options are available to help user accomplish a task innately and without wasting time.
UX design user flowchat
Should login fail be directed to a Reset Password page? Or is there another appropriate option?

Stages of User Flow Chart Development

Stages of User Flow Chart Development
  1. User Stories: Short and simple descriptions of a feature told from the perspective of the product user
  2. Task flow: A single flow that focuses on how users perform a specific task
  3. Wire flow: Convey the page-to-page sequence with individual page layout
  4. User flow: Convey all the pathways with process and individual page layout

Elements of a User Flow Chart

Each node in the flowchart is represented by different shapes, and each shape indicates a particular process:

Elements of a User Flow Chart
Most used elements of a flow chat

Best Practices for Creating Flow Chart

  1. Use Even Sizes and Spacing
    Consider making all flowchart symbols the same height and width (does not apply to symbols that is intentionally smaller). Try to maintain even spacing both horizontally and vertically between symbols.
UX design user flowchat
  1. Consistent Flow Direction
    Flowchart should be top-to-bottom or left-to-right (or right-to-left for RTL languages). Avoid mixing top-to-bottom and left-to-right flows in the same flowchart.
UX design user flowchat
  1. Consistent Branch Direction for Decision Symbol
    Use consistent flow direction for the “Yes” (e.g. right from the Decision symbols) and “No” (e.g. bottom from the Decision symbols) condition.
Consistent Branch Direction for Decision Symbol
  1. Merge Flow Lines to Simplified Visual
    A page may often have more than one subsequent flow line. Improve readability by merging flow lines so that they convey a sense of hierarchy and sequence.
Merge Flow Lines to Simplified Visual
  1. Use Sub-flows or Connector Nodes
    If the user flow is running exceedingly off the page because it’s too long, use a Sub-flow or Connector Nodes (labeled circles) that serve as jump points from one part of the process to another.
Use Sub-flows or Connector Nodes
  1. Use Colors Wisely
    Using too many colors can be noisy and may distract your reader. Use colors to help reader identify and group resources, and highlight important user actions.
Use Colors Wisely
  1. Avoid Confusion in User Flow
    Avoid any confusions by using hop-lines or rounded corner connectors to links between screens and actions.
Avoid Confusion in User Flow
Hop-line
Avoid Confusion in User Flow
Rounded corner connectors
  1. Include Symbol Legend
    Include a flowchart key to describe the meaning of symbols, shapes and colors if you use more than the usual basic ones (process, terminator, decision, document).
Include Symbol Legend

There are many online tools available for designing user flowcharts.  Furthermore, most of them support remote collaborative feature to encourage team collaboration or allow for client/team co-creation.  The following are a few examples of online tools which provides a decent amount of features for creating user flowchart at no-cost to get you started.

  1. Draw.io
UX design user flowchat
  1. FlowMapp.com
UX design user flowchat
  1. Lucidchart.com
UX design user flowchat

This post was inspired by Alexander Handley’s article from Medium.com and references has been taken from it.   Visit course section to check out our Certificate in Business Design course. This course enables you to upgrade your UX skills by learning the practical concept and technique of UX design and designing user flowcharts.

Related Workshop and Course:

UX UI Design

界面設計師 必需知道「扁平化設計」和「實感設計」的微妙關係

相信從事手機應用程式或者有參與網頁界面設計的 界面設計師 ,都必定會接觸過扁平化設計和質感設計。兩種設計類型看起來非常相似,一般人大抵不能清楚抽述到兩者的分別,但兩者之間確實存在微妙並且關鍵的分野。

相信從事手機應用程式或者有參與網頁界面設計的設計師,都必定會接觸過扁平化設計和質感設計。兩種設計類型看起來非常相似,一般人大抵不能清楚抽述到兩者的分別,但兩者之間確實存在微妙並且關鍵的分野。

在開始比較前,可以先深入淺出講解一下兩者在設計上的定義和背景。

扁平化設計(Flat Design)從2014年開始普及於網頁、系統與裝置介面,泛指一種完全以平面化來呈現視覺元素,使每一部分看起來都像是平躺在一個平面上。

它的出現某程度上是回應追求過於寫實的設計之下的產物。由於早年Apple的擬真化設計(Skeuomorphism)實在太成功,在硬體裝置和網頁介面設計上引起了一股熱潮,就是將所有按鈕畫得像實物一樣,令用戶完全代入。就這樣,Microsoft開展其改革腳步,提倡扁平化設計,將重心放於呈現按鈕的功能性,省去不必要雕砌的枝節,向Apple宣戰。

界面設計師 windows 10 UI

而實感設計(Material Design)是新興並由Google定義的一種「品牌化」設計風格,所有準則受明確規定,被認為是由扁平化設計應運而生的革新。

Flat design vs material design

雖然「扁平化設計」和「實感設計」都是「極簡主義」的方法,兩者卻存在微妙並且關鍵的差別:

界面設計師 Flat design vs Skeuomorphism

看到這裏,你可能會問為什麼Google對實感設計下定義並且有嚴格的規定? 

那麼我們首先要了解到手機和平板電腦的盛行,兩者卻也沒有「浮標」設計,用戶容易對頁面上的扁平化資訊感到混淆,隨時連「按鈕」或「輸入文字」的指意也分不清。當然,從擬真到扁平設計的轉型之所以能成功,正是因為使用者的學習經驗已足夠看懂抽象圖示的功能,因此不必要的點綴即使省略也不會易響其功能性。但當智能裝置的應用路徑愈趨複雜時,扁平化設計就不足以切合所有不同適應數碼互動程度的用戶。實感設計將擬真化的原始意圖與數碼世界接軌起來,但又不失簡潔的美感,使設計的溝通能力更進一步。

 一直以來, Google 長處於產品與介面混亂的困境 ── Android 系統附載在各式不同尺寸的電子裝置上,旗下產品又繁不勝數、介面整合困難,體驗破碎的問題嚴重,難以體現Google的品牌風格和形象。對於開發人員而言,使應用程式在多個設備上具有相似的外觀是一項艱鉅的任務,而推出一套嚴謹的指引就可以確保跨裝置的界面設計標準,統一了不同Android裝置上的外觀。

界面設計師 flat design UI pros and cons
界面設計師 Skeuomorphism design UI pros and cons

有了扁平化設計,設計師不再需要擔心如何讓他們的項目看起來更真實。相反,他們可以專注於其功能和性能。而實感設計回溯擬真化設計,為平面設計增加了動畫,層次和擬態性,使按鈕之類的東西易於區分。

 用Google的話來說,實感就是隱喻。

實感設計的主要原則之一是模仿事物在現實世界中的形態,但以完全簡化的方式呈現。僅使用現實主義作為一種工具,使我們的大腦更熟悉界面的運作方式。 但同時,不要使其看起來過於寫實。例如按鈕不再需要閃閃發亮的效果,表格欄目不需要內部陰影亦可讓用戶清楚了解當中的指意。

質感設計以平面為基礎,但涉及到更多的互動、顏色系統、佈局和功能,從而創建了一個設計生態系統,用戶可以在許多產品和裝置上熟悉這個生態系統。

 簡單來說,扁平化設計是一種最小化的環境,很大程度上依賴於用戶對總體設計界面的熟悉程度,並且去掉了任何不能滿足功能需求的東西。實感設計嘗試將一些概念從擬真化設計過渡到扁平化設計。這樣提供了一個針對數碼優化的界面,促進了用戶與介面的互動。

實感設計和扁平化設計均各有特色。以上的比較並非鼓勵大家要兩者擇其一。要創建一個真正出色的設計,是要真正了解你的受眾喜好和習慣,做到真正由他們的用戶體驗出發,沒有什麼可以阻止你將兩者結合在一起的。

想修讀有關界面設計嘅知識?可了解我們的Adobe XD UX/UI 設計初階課程 。

UX UI Design

好多人都話識UX,其實你又識唔識?

User Experience (UX) 概念及技能在設計行業非常之盛行,特別係喺數碼產品開發行業(如手機應用程式或網站),時常都需要聘請懂得 UX設計 的人才。坊間都有好多媒體提及到「以人為本設計」User Centered Design (UCD) 同UX之重要性及初創公司如何透過UCD模式來獲得成功。到底UX這個專業係做啲咩架呢?邊度有得進修相關技能?以及 UX設計 到底適唔適合你?

什麼是UX設計?

User Experience UX設計

當問到咩係UX時,單從字面解釋就可以理解為「專門負責研究用戶體驗的專業」,但內裡究竟包含咗咩流程同技巧呢?一般UX設計流程會包括設計思維 (Design Thinking)、用戶研究、User Persona、User Journey Mapping、製作線框稿 (Wireframe) 、原型製作 (Prototype)同可用性測試 (Usability Test)。當然,呢啲都係UX中重要的部分,但係如果你想成為一個專業UX從業員(如UX Designer或Business Designer),單係知道上述幾個步驟係唔足夠的,你必須要更透徹咁了解UX核心價值,以及作為一個專業的UX人士喺工作上有咩職責同需要面對乜野挑戰。

UX設計流程

下圖係GreenTomato Academy (www.greentomato.academy) 采納UK Design Council 的Double Diamond Design Thinking 框架及結合了GreenTomato Limited (www.gt.app) 多年數碼產品開發經驗而得出嘅一套完整UX設計流程:

Business Design Certificate in Business Design Greentomato Academy UX Design UI Design Wireframe Prototype Adobe XD

圖中所見,這個基於Design Thinking框架嘅UX設計流程分咗4大階段:(1) Discover;(2) Define;(3) Develop同 (4) Deliver,整個流程全面包含探索、分析、試驗同反覆測試元素。流程包括:市場調查、用戶研究、定義問題、用戶流程設計 (Task Analysis and User Flow Design)、互動 (Interaction Design)、製作線框稿 (Wireframe)、原型製作 (Prototype) 及可用性測試 (Usability Test),呢啲步驟都係強調「用戶分析及體驗設計」而非關乎外觀的用戶界面User Interface (UI) 設計。

坊間有時會誤解咗UX的性質,以為單係提供線框稿設計 (Wireframe)、原型製作 (Prototype) 及UI設計等等相關工作就係UX設計。很多雇主,什至乎設計帥本身都會誤解同混淆咗UX Designer及UI Designer嘅工作性質及職責。UX Designer係負責架構用戶大腦所接收到嘅信息,而UI Designer係負責設計用戶眼睛所看到的同互動模式,如果得唔到充分了解同掌握,角色上就好難得到充分嘅發揮。

User Experience UX設計

線框稿設計 Wireframe Design

總結

希望大家睇完呢編文章之後會對UX設計有更多認知同興趣,坊間都有不少網上分享、教學及課程可以學習UX設計。現時 UX 設計相關職位待遇不低,初級職位起薪點平均在月薪 2至2.5 萬港幣不等。如果你係一個具好奇心及富有分析力嘅人,或對數碼轉型 (Digital Transformation) 及數碼產品開發行業有興趣,咁UX設計相關都會適合你。

GreenTomato Academy現正開辦UX/UI設計相關嘅工作坊及課程,為有興趣了解行業趨勢、有意轉型的設計師們或有意向UX/UI Design 及Business Design行業發展之人士提供入行機會。

相關工作坊及課程

UX設計原型製作及可用性測試 
UX設計原型製作及可用性測試(工作坊)
Early Bird Special H̶K̶$̶1̶5̶8̶0̶ HK$1280

Adobe XD UX/UI 設計初階
Adobe XD UX/UI 設計初階
Early Bird Special H̶K̶$̶5̶98̶0̶ HK$5380

Hong Kong Consumption Voucher 消費券計劃