In 2010, one of my photos was published in Photographer's Forum Magazine.
Experimenting with HTML5 and CSS3
Experimenting with HTML5 and CSS3, using Codepen.io as a text editor.
Design Principles for Data Visualization
Charts must be meticulously organized, featuring clear labeling, efficient search functionalities (where applicable), intuitive navigation systems, effective filtering mechanisms, and legible text sizes to ensure optimal accessibility and user comprehension.
Differentiation in line graphs/charts
The more detailed the graph is, the mode elements/nodes it has
Objects that look alike will be identified as a part of a group (ex. Boxing bars help readers identify groups)
Volume, curvature, shading, and color allow more generic judgments
Metrics numerical filters
Groups are text-based, such as type of employee, list of items, etc.
Time-based filters, such as months, quarters
Gradients are ok for sequential rates
Rarely use 3D
Color has meaning, and High-contrast colors are used
Sequential when you are ordering values from low to high.
Divergent when the values are ordered, and there is a critical mid-point (e.g., an average or zero).
Categorical when data falls into distinct groups (e.g., countries) and therefore requires contrast between adjacent colors.
Accessibility For accessibility, if there are non-text-based interactive, graphic, or image-based charts, there must be a text-only chart underneath or hidden (but readable for screen readers) and an alternative text description displaying detailed data relating to the chart.
Data Visualization Guidelines: When to use...
Photos published in Black & White Magazine
Lean UX, Applying Lean Principles to Improve User Experience by Jeff Gothelf with Josh Seiden
“Lean UX”, Applying Lean Principles to Improve User Experience, by Jeff Gothelf with Josh Seiden, describes a design process beneficial to UX Designers. Applying systems analysis principles, Lean UX describes how to integrate the practice into a design team. Agile is a development methodology and deals with UX design; it is iterative design that uses product feedback to improve the user experience and the implementation process. The first two chapters discuss 4 core principals of agile development to product design.
The first principle is “Individuals and Interactions over processes and tools”, which engages the entire team, the ideas flow freely and frequently, and use collaborative tools that help facilitate this line of communication. Examples of collaboration tools are; for wireframing: Axure, InVisionApp, for sharing documents; Google Drive, Visual Studio, SharePoint, or Wiki Team pages.
The second principle is “Working software over comprehensive documentation”, to build workable software/User Interfaces quicker, to assess if the solution is market fit and determine its viability. You can measure and assess the user interface’s viability through thorough user testing and gathering user feedback.
The third principle is “Customer Collaboration over contract negotiation”. This phase foster’s collaboration with teammates and customers to brainstorm an understanding of the problem and proposed solutions. Following these principles produces faster iterations and heavy documentation of the user interface. If you do not follow this approach, you won’t have solid requirement documents for the user interface.
The fourth principle is “Responding to change over following a plan”, after the initial product design, discover what’s working and what’s not, and adjust proposals and test again. This is a valuable approach that recognizes in agile design plans must be flexible.
A great quote from the book defines what the practice of Lean UX is: “Lean UX is the practice of bringing the trust nature of a product to light faster, in a collaborative, cross-functional way that reduces the emphasis on thorough documentation while increasing the focus on building a shared understanding of the actual product experience being designed.”
Having cross-functional teams are beneficial in the process of Lean UX. Cross-functional teams should be involved in creating your product. They are a mix of software engineers, product management, and should be involved in the interaction design, visual design, content strategy, marketing, and quality assurance process. All play a role in a Lean UX team. This is continuous till the end of the project life cycle. Ideally, there should be a total of 10 people on a team, on one project at the same location. The 10 people can consist of: software engineers, products management, interaction design, visual design, content strategy, marketing, and quality assurance. While in practice a team member can wear multiple hats, it is important that each member approach their contribution from their unique perspective. If it is a multiple hat style team it is beneficial to get additional input from stakeholders and users of the interface.
“Lean UX measures progress in terms of explicitly defined business outcomes.” A UX Designer should manage the business outcomes and make progress towards them, and figure out the efficiency of the products features. If a feature is not working well, the UX Designer should make an objective decision to keep, change or replace the features.
A project focus team is important to have within the Lean UX process. The UX Designer should assign teams to solve problems and this shows trust in the teams. They will come up with their own solutions to the problems. One team assigned to a project. This also highlights the value of team ownership of the solution. With trust comes a commitment that each member of the team is valuable to the overall solution.
The book suggests keeping inventory low and to make the inventory high quality. Design is necessary to move the team forward and avoid a big inventory, which are untested, or unimplemented design ideas. Keep engaging customers during the design and development process. Also keep to regularly scheduled activities relating to quantitative and qualitative methods. This also implies group knowledge of milestones. Everyone on the project should be aware of decision points, and presentation deadlines. Know what the users are doing with the product and why they are doing it. Do Research on a regular schedule and involve the entire team. Avoid rock stars, gurus, and ninjas; it is not a good habit to have them in a workplace because “other elite experts of their craft break down team cohesion and eschew collaboration”. Use whiteboards, foam core boards, artifact walls, printouts, and sickly notes to share and analyze the teams work progress to other teammates, colleagues, and customers. Make sure to talk to customers in the field and develop potential scenarios. Going out of the building is a good way to do this process. Performing active listening liaison with sponsors and stakeholders. Look to see how is not providing input and go out of your way to touch base with them. Get a complete picture of the stakeholders’ requirements.
In addition, the book mentions to learn first and scale second. Making sure an Idea is right comes before scaling it out which “mitigates the risk inherent in broad feature deployment”. Also find out the project outcomes the team is achieving. It entails a cross-functional collaboration involving the stakeholders and the team.
A UX Designer should apply the principles learned in the “Lean UX” book, to define the “team’s makeup, location of research/user testing, goals, and practices”. The first two chapters is a good start to towards constructing a Lean UX process. The Lean UX process will lead towards more faster and functional solutions and solid teamwork process and outcomes. It will also provide a means of preventing some common UX pitfalls, which come from poor team/users/stakeholder’s communications, and poor non-flexible planning.
How to Make User-Friendly Forms (Part 2/2)
This is a continuation of the 39 Guidelines, the second part, After Filling out the Form.
39 Guidelines for UX Designers and Developers
After filling out the Form (Part Two):
32. Format forms for printing – The form should have a printing version setup, so the user can print out their details on what they had filled out in the form of the form itself.
33. Allow users to see their entered data – Provide a summary for users to review the completed form data before submission. Also it is beneficial for users to see their data in the input fields while filling out the form.
34. Allow simple searches – to mine through form data
35. Confirmation Email - Figure out if gradually engagement solution will work for the website, it is a great way to present “customers an understanding of how they can use your service and why they should care.” A confirmation email which is a part of the gradually engagement solution, will provide users with the authentication of their submitted form(s) or their potential next steps .
36. Being able to view old requests/data being stored – Providing users a summary of the submitted form data.
37. Easy to edit form elements before submitting form-This makes sure the user will double check their answer and correct a possibly wrong answer before submitting the form.
38. Have a "save draft" button - which shows the user a review of their
online form and a "submit button" submit the information/form into the
database.
39. The review form - shows what answers has been chosen by the user and
what files have been attached before the submission of the form.
In conclusion, the two books "Forms that Work: Designing Web Forms for Usability (Interactive Technologies)" by Caroline Jarrett and Gerry Gaffney and "Web Form Design" by Luke Wroblewski are an excellent way to create user-friendly web forms. A UX Designer should fit the two sets of guidelines I gathered from the books and usability.gov into the UX process lifecycle.
Sources
I read two books and analyzed the methodology on creating user-friendly online forms (webforms) from, "Forms that Work: Designing Web Forms for Usability (Interactive Technologies)" by Caroline Jarrett and Gerry Gaffney and "Web Form Design" by Luke Wroblewski.
The book, "Forms that Work: Designing Web Forms for Usability talks about the process on how to create good forms in an easy to read format. The kinds of forms mentioned in the book are for registration, communicating, commerce, and for the government. The authors explain “how to deal with instructions, progress indicators, and errors”. There are great examples of form making in the book. It also gives tips to make sure the forms contain accurate data for the users and suggestions on how to user test the forms. This is a great book to read, and I used this book to help create my form making guidelines.
The author, Luke Wroblewski, of the book, "Web Form Design" has worked with many big name clients, such as Yahoo! and eBay. He gives great advice on how to make effective and engaging web forms. He goes over the details of form structure, form elements, and form interaction. This is also a fantastic book on how to make user-friendly forms and I also used this book in collaboration with the other book to create the guidelines below.
I’d like to thank Jessica Enders Principal of Formulate Information Design, a leading - expert of fixing webforms. She had emailed me a suggestion to find these two wonderful books with her suggestions to include them to improve my process.
How to Make User-Friendly Forms (Part 1/2)
As a UX Designer, following the UX process is paramount for completing a successful project. An agile, iterative process is the best way to go about the project with cross-functional teams to collaborate on ideas to design a fully-functional digital user interface.
39 Tips on Creating User Friendly Forms
As a UX Designer, I find it useful to communicate these guidelines to program managers and other developers so that any critique I give has a set of design rules that are accepted as common design goals. The list of guidelines to follow when creating an online forms are suggestions to give the developers, and for them to keep in mind when creating the back-end development of the forms. I also included references from usability.gov site because these are also guidelines on site development on how to improve User Experience for User Interfaces.
39 Guidelines for UX Designers and Developers
Presenting and completing the Form (Part One):
Design for common browsers – Make sure the form is compatible on all browsers such as: Google Chrome, Safari, Firefox, older browsers, etc.
Make sure the form is responsive for multiple devices – Forms should be responsive across multiple devices and forms should be tested across many devices.
Avoid horizontal scrolling - Horizontal scrolling is a tedious and slow way to view the form. (Referenced from the usability.gov site)
The process on how the user will be able to log into the form, if
it's secure or not – Security is important when dealing with HIPAA and users privacy, compliance information.Label push button clearly – Make sure the user can read each button legibly and there’s a contextual understanding to each button.
Put labels close to data entry fields – When designing a form grouping and aligning elements of the forms is great for creating an easy form that flows well.
Use radio button for mutually exclusive selections – Since radio button are “mutually exclusive, they should have a default value selected”.
Use familiar widgets – It will slow users down if using unfamiliar widgets and cause users not to use the widgets. (Referenced from usability.gov)
Use checkboxes to enable one or multiple selections from a list of choices – Checkboxes elicits the fastest performances. (Referenced from usability.gov)
Make sure there are Help Texts – Help text will help the users complete the form accurately.
Display default values – Use default values to help users to select example options and it’s better to use default values then error messages.
Provide auto-tabbing functionality – auto tabbing can reduce data entry times. (Referenced from usability.gov)
Minimize use of shift key – Shift key uses extra attention and time so it’s not necessary. (Referenced from usability.gov)
Define acronyms and abbreviations – It is good to define acronyms and abbreviations first, (if you can’t) have a site, which defines the terms.
When the system should be available - such as providing times of help hotlines or forms that need to be filled out at certain dates or times.
W3C Web Accessibility Initiative – helping people with disabilities to participate equally on the web.
What language used – Determine which World language is used for the form (or currency stated)
Line items must fit legibly in a table – If there are tables within the form make sure the text is legible and fits in each field correctly.
There are back, next and cancel buttons - cancel asks to exit form,
online form auto saves changes/updates to form. Back goes back a step.
Next goes to the next step if completed first step or user gets an
error message.Contains: help and FAQ (link) – Incase a user needs help with a glossary to define terms in a form, or frequently asked questions about a form, or an open chat room to help someone fill-out a form, help and FAQ are great links/resources to have on every site. (Referenced from the usability.gov site)
Each step of the online form needs to be highlighted - when the user
is on the page and it shows specifically what page they are on also
using breadcrumbs or a navigation tool. Breadcrumbs show the history of the links the user navigates through. This help the users navigate easily through each step of the form.Time Out Warnings – A user needs to know if the form will time out when they are not active on the form. This is a source of user frustration and often cited as a reason for user failure.
Avoid scroll stoppers –It’s “a graphic or other page element that may visually impede a user from scrolling to the true top or bottom of a page. Misplaced headers, horizontal lines, or sections of text in very small fonts may act as scroll stoppers.” (Referenced from the usability.gov site)
Distinguish required and optional data entry fields – A simple red asterisk and text communicating to the user required fields.
Ensure that double-clicking will not cause problems – A common source of frustration is to cause the user to accidentally leave the page.
Needs error message (how to fix/recover errors) - easy to fix and
understand alerts, error hints, info, highlights, prompts, and
messages.User can attach all required documents – It is beneficial for users to have to option to attach all required documents to a form.
Limiting text field characters and validate how many are left when typing – The designer and developer should inform the user on how many characters are left when typing in a text field.
Fast pace (already existing data auto-populate) into the form elements – This speeds up the process of filling out a form.
Contains hints (?) - in circles for defining terms when needed
Inline Validation - confirmation of valid answers after providing
an answer, suggestions - a large of answers to pick from, quality
indicator to guide people to answer hard questions.
Look for next blog for more guidelines - Part two - After Filling Out the Form
Sources
I read two books and analyzed the methodology on creating user-friendly online forms (webforms) from, "Forms that Work: Designing Web Forms for Usability (Interactive Technologies)" by Caroline Jarrett and Gerry Gaffney and "Web Form Design" by Luke Wroblewski.
The book, "Forms that Work: Designing Web Forms for Usability talks about the process on how to create good forms in an easy to read format. The kinds of forms mentioned in the book are for registration, communicating, commerce, and for the government. The authors explain “how to deal with instructions, progress indicators, and errors”. There are great examples of form making in the book. It also gives tips to make sure the forms contain accurate data for the users and suggestions on how to user test the forms. This is a great book to read, and I used this book to help create my form making guidelines.
The author, Luke Wroblewski, of the book, "Web Form Design" has worked with many big name clients, such as Yahoo! and eBay. He gives great advice on how to make effective and engaging web forms. He goes over the details of form structure, form elements, and form interaction. This is also a fantastic book on how to make user-friendly forms and I also used this book in collaboration with the other book to create the guidelines below.
I’d like to thank Jessica Enders Principal of Formulate Information Design, a leading - expert of fixing webforms. She had emailed me a suggestion to find these two wonderful books with her suggestions to include them to improve my process.