Permalink
Browse files

Written about intuative features challenges

  • Loading branch information...
1 parent 05e964a commit baca5e6a715b7f37aea36c0b4671e9489610200c @sarahtattersall committed Jan 4, 2013
Showing with 57 additions and 5 deletions.
  1. +26 −2 design/challenges.tex
  2. BIN images/design/navigation_caret.png
  3. +31 −3 references.bib
View
@@ -1,6 +1,6 @@
\subsection{Challenges}
\subsubsection{Filtered emails}
- Although not technical, one big challenge we faced was how to reduce the number of irrelevant emails a student was receiving. Two solutions that were not optimal were discussed:
+ One big design challenge we faced was how to reduce the number of irrelevant emails a student was receiving. Two solutions that were not optimal were discussed:
\begin{itemize}
\item \textbf{Opt in emails:} students could opt in for receiving certain email catagories based on tags. We soon realised that this would require a lot of maintence by students to continiously update their whitelist with tags as they were being created.
Not only would it be a lot of work for a student, but students might miss out on exciting emails which do not fall into specific catagories, or a catagory a student had remembered to whitelist. For example the Raspberry Pie is unlikely to fall into a tag group but it's own. If a student forgets to add this to their list they'll miss out entirely on the emails when the likilihood is that they may have been interested.
@@ -15,4 +15,28 @@ \subsection{Challenges}
\item A student will \textbf{not receive} an email if any of the tags exist in the emails tags and none exist in the students skill set.
\end{itemize}
- Furthermore in the student account settings we allow them to choose between receiving this smart email system, all emails, or only personal and event emails.
+ Furthermore in the student account settings we allow them to choose between receiving this smart email system, all emails, or only personal and event emails.
+
+ \subsubsection{Intuative Features}
+ Several design small challenges that fall under one large umbrella are how to ensure that a student knows the features we implemented are available to them. Since we developed the site it is obvious to us how to use it but to ensure that users know too we have made use of the following:
+
+ \paragraph{Tooltips:} These appear whenever you run your cursor over an area of text that is actually editable. By this we mean you can click on it and edit it in place. Examples are the students name, year, degree, and bio. They all start with `click here to' and we believe they are well placed and helpful rather than irritating.
+ Tooltips also appear for company and admin. %TODO CHECK THIS
+ Once a user is comfortable with using the site, they have the option to turn tooltips off in their settings.
+
+ \paragraph{Yellow Highlighting:} This also ties in nicely with the tooltips and highlights the boundary for what can and cannot be edited.
+
+ \paragraph{Incomplete Sections:} In order to highlight to any user a section, document or field that is incomplete we have opted to highlight these in red rather than providing a message. We feel that by keeping this theme consistent throughout all users profiles it is quite intuative in itself.
+ Whats more is that when a student initially signs up they are informed that their profile is inactive and they need to fill in certain fields before they can activate it. As they fill in these fields (which are initially red) the colour dissapears and we hope that students will intuatively learn from the beginning that the red colouring means an item is missing.
+
+ \paragraph{Navigation:} This has largely been made possible through the use of a navigation bar at the top of our website. We feel that this is intuative to all of our users who will be familiar with navigation bars from other sites such as Facebook\cite{facebook}, LinkedIn\cite{linkedin} and even Google\cite{google}. These websites really encourage user interaction by clicking on items located anywhere on the page and adopt the technique of changing the cursor to a pointer (hand) rather than the default which is normally displayed when you can interact with an object. As such we've adopted this technique through our site when items on the page can be clicked on to redirect. For example students can click on the top three events \& placements that are displayed on their dashboard. In order to make it very obvious we subtly change the colour scheme of the background to display that they've highlighted it.
+ % TODO INSERT PICTURE HERE
@petehamilton
petehamilton Jan 4, 2013 collaborator

Let'd do this as late as poss cause we might fiddle with navigation before the end!

@sarahtattersall
sarahtattersall Jan 4, 2013 owner

Absolutely :)

+
+ We have also made use of icons in order to make navigation more intuative, again users of every day websites have become accustimed to certain items meaning certain things, for example a cog is often associated with settings and so we had no qualms about using them freely in the design of our site.
+ The downwards facing caret is used to alert users that clicking on their name on the navigation bar provides them with extra options.
+
+ \begin{center}
+ \includegraphics[scale=0.5]{images/design/navigation_caret}
+ \end{center}
+
+ Similarly the star and ban icons on a company as featured earlier, combined with the tooltips make it clear to a user what they mean.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -2,20 +2,48 @@
%% http://bibdesk.sourceforge.net/
-%% Created for Sarah Tattersall at 2013-01-04 12:35:39 +0000
+%% Created for Sarah Tattersall at 2013-01-04 17:05:55 +0000
%% Saved with string encoding Unicode (UTF-8)
+@webpage{linkedin,
+ Date-Added = {2013-01-04 17:05:37 +0000},
+ Date-Modified = {2013-01-04 17:05:37 +0000},
+ Title = {LinkedIn},
+ Url = {http://www.linkedin.com/home},
+ Bdsk-Url-1 = {http://www.doc.ic.ac.uk/cpp/}}
+
+@webpage{facebook,
+ Date-Added = {2013-01-04 17:03:37 +0000},
+ Date-Modified = {2013-01-04 17:03:53 +0000},
+ Title = {Facebook},
+ Url = {https://www.facebook.com/},
+ Bdsk-Url-1 = {http://www.doc.ic.ac.uk/cpp/}}
+
+@webpage{google,
+ Date-Added = {2013-01-04 17:03:35 +0000},
+ Date-Modified = {2013-01-04 17:05:51 +0000},
+ Title = {Google},
+ Url = {http://www.google.com/},
+ Bdsk-Url-1 = {http://www.doc.ic.ac.uk/cpp/}}
+
@webpage{rspec-overview,
- Date-Added = {2013-01-04 12:34:54 +0000},
- Date-Modified = {2013-01-04 12:34:54 +0000},
+ Date-Added = {2013-01-04 12:43:30 +0000},
+ Date-Modified = {2013-01-04 12:43:30 +0000},
Title = {Rspec Overview},
Url = {http://rspec.info/},
Bdsk-Url-1 = {http://www.doc.ic.ac.uk/cpp/}}
+@webpage{jasminerice,
+ Date-Added = {2013-01-04 12:34:54 +0000},
+ Date-Modified = {2013-01-04 12:43:43 +0000},
+ Title = {Jasminerice},
+ Url = {https://github.com/bradphelan/jasminerice},
+ Bdsk-Url-1 = {http://www.doc.ic.ac.uk/cpp/}}
+
@webpage{guard,
Date-Added = {2013-01-04 12:28:47 +0000},
Date-Modified = {2013-01-04 12:35:39 +0000},

0 comments on commit baca5e6

Please sign in to comment.