Building Web Uis That Users Love

Transcript Building Web Uis That Users Love

Building Web UIs
That Users Love
Hi! I’m Al
• Written device drivers, console apps, desktop apps, services,
websites, and mobile apps
• Worked as code monkey, dev team lead and manager, architect, and
pseudo product lead
• Currently at Balance Innovations working with web and mobile
Today’s conversation includes
• Background and basic UX ideas
• Practical examples creating UIs
Some things to think about…
• Who are your users?
• It is all about the users
YOU
are NOT
your user!
Software engineers
and designers are
often divorced from
the consequences
of their actions.
Factors in Usability
Design ideas to remember for good UX
• Gestalt design and psychology principles
• Shapes, size, color, contrast, and saturation all naturally direct our
brains to starting points and then in directions
• Line length, labels, messaging, and alerts all affect how the user views
the page
Parallax Scrolling
• Scrolling technique where background images move by the camera
slower than foreground images creating an illusion of depth
• Examples:
• http://discover.store.sony.com/be-moved/
• http://neomam.com/interactive/13reasons/
• http://codepen.io/keithclark/pen/JycFw
• http://keithclark.co.uk/articles/pure-css-parallax-websites/
UX Value of Parallax Scrolling
• Helps direct users through the page and content
• Highlights interesting sections
• Requires interaction, which increases users engagement
• When done well, it is very beautiful
Collapsing Banners
• A banner that disappears from the view
• Examples:
• http://www.arungudelli.com/Tools/HTML5/SimpleCollapsingHeaderusingCSS.
htm
• http://www.arungudelli.com/css/simple-collapsing-header-using-css/
• http://www.ibm.com/big-data/us/en/index.html?lnk=msoST-bgda-usen
• http://stackoverflow.com/questions/6713324/how-to-shrink-navigation-menu-whenscrolling-down
• https://www.visitkc.com/
• http://css-tricks.com/scroll-fix-content/
body, div, h1, h2, h3, h4, h5, h6, p {
margin: 0; padding: 0; border: 0;
}
body { text-align: center; }
header {
height: 100px;
background: #99FF66;
position: fixed;
width: 100%;
z-index: 10;
}
#banner {
width: 100%;
height: 300px;
position: fixed;
top: 100px;
background: #FFFF66;
}
#content {
width: 100%;
position: relative;
top: 400px;
background: #FFFFCC;
height: 1500px; /* Demo purposes */
}
<div id="container">
<header>
<h1>Header it's Fixed with higher Z-Index</h1>
</header>
<div id="banner">
<h2>Banner Fixed 100 px from Top</h2>
</div>
<div id="content">
<p>Content </p>
</div>
</div>
(function($) {
$(document).ready(function() {
var hide_show_main_nav = debounce(function() {
if (!$('nav').hasClass('expanded')) {
var currentScroll = $(this).scrollTop(), scrollDifference = Math.abs(currentScroll - pastScroll);
if (currentScroll > menuOffset) {
$('nav').addClass('attached_hidden');
if (currentScroll > detachPoint)
$('nav').addClass('attached_hidden');
if (scrollDifference >= hideShowOffset)
if (currentScroll > pastScroll) {
$('nav').removeClass('attached');
$('nav').addClass('attached_hidden')
} else {
$('nav').removeClass('attached_hidden');
$('nav').addClass('attached')
}
} else if (currentScroll <= 0) {
$('nav').removeClass();
$('nav').addClass('header_wrapper')
};
pastScroll = currentScroll
}
}, 250);
$(window).on('scroll', function() {
hide_show_main_nav()
})
})
}(jQuery));
UX Value of Collapsing Banners
• The fixed portion provides immediate access
• It is so simple, the user does not have to think about it or remember
where they were on the page
• The collapsed portion starts off with greater detail or can add some
beauty or fun to initial user interaction
Collapsed Content
• Examples:
• http://jsfiddle.net/YYPKM/3/
• http://stackoverflow.com/questions/17631417/css-pure-css-scroll-animation
<!DOCTYPE html>
<html>
<head>
<script>
function toggle(obj)
{
var id = obj.id + 'Detail';
if (document.getElementById(id).style.display === undefined ||
document.getElementById(id).style.display == '' ||
document.getElementById(id).style.display == 'block')
document.getElementById(id).style.display = 'none';
else
document.getElementById(id).style.display = 'block';
}
</script>
</head>
<body>
<div id="box1Wrapper" class="boxWrapper">
<div class="boxHeadingWrapper">
<a href id="box1Heading" class="collapse" title="Heading" onclick="toggle(this); return false;">Heading (click me)</a>
</div>
<div id="box1HeadingDetail">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</body></html>
UX Value of Collapsed Content
• Gives the user control over their content
• Simple UI
• Adds some fun
Notification Messages
<div id="mainContainer" class="container">
<div class="entityMessageWrapper">
<div id="entityMessageDiv" class="entity_blank entity_info">
<span id="entityMessage">Your password is going to expire in 25 days. </span>
<a id="messageLink" href="/Account/ChangePassword">Click Here to change it before then.</a>
<button id="messageCloseButton" onclick="closeMessage();"
class="entity_button entity_button_info">X</button>
</div>
</div>
</div>
UX Value of Notification Messages
• They indicate something has happened, but do not force the user to
abruptly stop
• When action is required, provide access to that action
• User learns to keep an eye on one location for notifications
Extra References
• CSS Support:
• http://caniuse.com/
• Fun:
• http://bennettfeely.com/csscreatures/
Thanks!
[email protected]
[email protected]
@zealouscoder

Building Web Uis That Users Love

Transcript Building Web Uis That Users Love

Directory