\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{vaibhavi25}
\pdfinfo{
  /Title (hci.pdf)
  /Creator (Cheatography)
  /Author (vaibhavi25)
  /Subject (HCI Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{0079A6}
\definecolor{LightBackground}{HTML}{EFF6F9}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{HCI Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{vaibhavi25} via \textcolor{DarkBackground}{\uline{cheatography.com/121508/cs/22272/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}vaibhavi25 \\
  \uline{cheatography.com/vaibhavi25} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Not Yet Published.\\
   Updated 7th April, 2020.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.

\begin{multicols*}{3}

\begin{tabularx}{5.377cm}{x{1.41887 cm} x{1.32733 cm} x{1.8308 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{5.377cm}}{\bf\textcolor{white}{HCI Development Cycle}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Design}} & {\bf{Evaluate}} & {\bf{Implement}} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
Ethnography & Prototype & Expert Evaluation \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
Task Analysis & GUI tools & Usability testing \tn 
% Row Count 6 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{3}{x{5.377cm}}{Design Guidelines} \tn 
% Row Count 7 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{5.377cm}}{Scenarios} \tn 
% Row Count 8 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{5.377cm}}{{\bf{This HCI development cycle involving (DESIGN -{}- EVALUATE -{}- IMPLEMENT) is an iterative process and should be used at every stage.}}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Evaluation methodologies}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Expert}}: {\bf{Inspection methods}}(Heuristic evaluation, cognitive walk-through), {\bf{Models}}} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{User testing}}: {\bf{Qualitative methods}}(observation, interviews, questionnaires, think-aloud), {\bf{Quantitative usability evaluation}}} \tn 
% Row Count 5 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{User testing is difficult than Expert evaluation}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{PACT}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{P}}(People){\bf{A}}(Activities){\bf{C}}(Context){\bf{T}}(Technologies)} \tn 
% Row Count 2 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{"People use technologies to undertake activities in contexts" (To understand how to \newline develop the best interfaces, we must understand people!)}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Neilson's 10 Design Heuristic}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Visibility of system status}}:The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.} \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Match between system and the real world}}: The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.} \tn 
% Row Count 10 (+ 6)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{User control and freedom}}: Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.} \tn 
% Row Count 15 (+ 5)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Consistency and standards}}} \tn 
% Row Count 16 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Error prevention}}} \tn 
% Row Count 17 (+ 1)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Recognition rather than recall}}: Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.} \tn 
% Row Count 24 (+ 7)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Flexibility and efficiency of use}}: Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.} \tn 
% Row Count 30 (+ 6)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Neilson's 10 Design Heuristic (cont)}}  \tn
% Row 7
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Aesthetic and minimalist design}}} \tn 
% Row Count 1 (+ 1)
% Row 8
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Help users recognize, diagnose, and recover from errors}}} \tn 
% Row Count 3 (+ 2)
% Row 9
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Help and Documentation}}} \tn 
% Row Count 4 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{QUOTE TO REMEMBER}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Do everything possible to understand users(people).} \tn 
% Row Count 2 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Interview(techniques)}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Formerly structured,Semi-structured,Open-ended questions, Closed-ended questions, Grand tour questions} \tn 
% Row Count 3 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.9908 cm} x{2.9862 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Stakeholders}}  \tn
% Row 0
\SetRowColor{LightBackground}
Primary & Secondary \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
Tertiary & Facilitators \tn 
% Row Count 2 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{Identify stakeholders for your system, so you know what to give more importance.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.2531 cm} x{1.04425 cm} x{0.8354 cm} x{1.04425 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{4}{x{5.377cm}}{\bf\textcolor{white}{{\bf{Neilson Quick Slogans}}}}  \tn
% Row 0
\SetRowColor{LightBackground}
Your best is not good enough & User is always right & Users are not \seqsplit{designers} & The user is not always right \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
Designers are not users & less is more & Details matter & Help does not \tn 
% Row Count 5 (+ 2)
% Row 2
\SetRowColor{LightBackground}
Usability engineering is a process & vice \seqsplit{presidents} are not users &  &  \tn 
% Row Count 8 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}----}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{MVC Architecture}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Model, View, Controller} \tn 
% Row Count 1 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{MVC divides application into: \newline - Model of core functionality and data \newline - Views displaying information to user \newline - Controllers handling user input}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{2.53827 cm} x{2.43873 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{MVC Pros and Cons}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Pros}} & {\bf{Cons}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
Multiple views of same model & Complexity for simple interactors \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
Synchronized views & Potentially excessive updates/messages \tn 
% Row Count 5 (+ 2)
% Row 3
\SetRowColor{white}
Pluggable V \& C and "look and feel" & Tight coupling, in practice \tn 
% Row Count 7 (+ 2)
% Row 4
\SetRowColor{LightBackground}
 & Lack of portability \tn 
% Row Count 8 (+ 1)
% Row 5
\SetRowColor{white}
 & Some toolkits make MVC framework hard \tn 
% Row Count 10 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{ICONS}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{} \tn 
% Row Count 0 (+ 0)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Icons make use of three principle types of \newline representation: \newline  -{}- Metaphor relies on people transferring knowledge from one \newline domain and applying to another \newline -{}-  Direct mapping - creating a more or less direct image of \newline what the icon is intended to represent \newline -{}- Convention - arbitrary design, which has become accepted \newline as standing for what is intended over time}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Norman's interaction framework}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Gulf of execution}}: User's formulation of actions} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Gulf of evaluation}}: User's expectations about system state} \tn 
% Row Count 4 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{p{0.4577 cm} p{0.4577 cm} p{0.4577 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{5.377cm}}{\bf\textcolor{white}{Horton's checklist for icon designers}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{5.377cm}}{Understandable. Spontaneously suggest the intended concept to the viewer?} \tn 
% Row 1
\SetRowColor{white}
\mymulticolumn{3}{x{5.377cm}}{Unambiguous. Are additional cues (label, other icons documentation)} \tn 
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{5.377cm}}{Informative. Why is the concept important?} \tn 
% Row 3
\SetRowColor{white}
\mymulticolumn{3}{x{5.377cm}}{Attractive. Does the image use smooth edges and lines?} \tn 
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{5.377cm}}{Legible. Test all combinations of color and size?} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.21133 cm} p{0.75186 cm} x{1.2531 cm} x{0.96071 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{4}{x{5.377cm}}{\bf\textcolor{white}{Types of Metaphors}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{Orientational} & \seqsplit{Ontological} & Structural & Metonymy \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
eg: spinner controls and up voting & eg: "kill the \seqsplit{process"} & eg: file deletion is using trash can & \seqsplit{magnifying} \seqsplit{glass:For} search \tn 
% Row Count 6 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}----}
\SetRowColor{LightBackground}
\mymulticolumn{4}{x{5.377cm}}{{\bf{Orientational}}:Gives a concept a spatial orientation \newline  {\bf{Ontological}}: Identifies an abstract system concept with a basic category of existence in the physical world: substance, object, container or entity \newline {\bf{Structural}}: Identifies an abstract system concept with a detailed real world concept or object \newline {\bf{Metonymy}}: use of the name of one thing for that of another of which it is an attribute or with which it is associated}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}----}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{{\bf{'Understanding}}' before making the design}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{It is important to create personas and scenarios before you start designing.} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Personas}}: Fictional characters, which you create based upon your research in order to represent the different user types that might use your service, product, site, or brand in a similar way. Creating personas will help you to understand your users' needs, experiences, behaviours and goals.} \tn 
% Row Count 8 (+ 6)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Scenarios}}:Stories(real-world experiences of people), Conceptual(abstract descriptions),Concrete(specific design decisions and tech. added), Use cases(formal descriptions that can be implemented)} \tn 
% Row Count 12 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Gestalt Properties}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{The Gestalt theory is guided by 5 principles — Proximity, Similarity, Continuation, Closure, and Figure/Ground.} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Proximity}}: When an individual perceives an assortment of objects they perceive objects that are close to each other as related.} \tn 
% Row Count 6 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Similarity}}: Elements can visually be grouped together if they have visual similarities. This can be applied in the form of color, shape, or iconography.} \tn 
% Row Count 10 (+ 4)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Continuation}}: Continuity happens when the eye is guided to move from one object to another.} \tn 
% Row Count 12 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Closure}}: Individuals perceive objects such as shapes, letters, pictures, etc., as being whole when they are not complete. Specifically, when parts of a whole picture are missing, our perception fills in the visual gap.} \tn 
% Row Count 17 (+ 5)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Figure/Ground}}: Refers to our ability to visually separate elements on different planes of focus. There are three ways to effectively execute this, of these through layering, contrast, and information hierarchy.} \tn 
% Row Count 22 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Gestalt theories can be applied to UX design and If applied correctly, they can provide you with some quick wins out of the box.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Techniques and terminology}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Ethnography , Interview , Questionnaire, Participatory design , Scenarios , Prototyping ,Probes , Card sorting , Focus groups} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Ethnograpthy}}: Ethnography, and other types of field studies, allow design teams access to the real-life environments of their end users. It allows designers insight into the tangible and technical and social environments of their users, as well as access to the tools users might already be using.} \tn 
% Row Count 10 (+ 7)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Ethnography}}: As a methodology for UX design, it's both about how people interact with technology, and also about how they describe their experience of interacting with their technology.} \tn 
% Row Count 14 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{p{0.4977 cm} p{0.4977 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Severity Ratings}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{} \tn 
% Row Count 0 (+ 0)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{- 0. No problem \newline - 1. Cosmetic problem \newline - 2. Minor – low priority \newline - 3. Major problem – high priority \newline - 4. Catastrophe – must fix}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}