Usability articles and resources Browse by topic Browse by category Latest article 5 reasons why your first user research activity should be a usability test 4 April, 2016 - A usability test is the wrong research method when you want to discover if there's a real user need for your product; when you want to understand the environment where your system is used; and when you want to find out how people use your product in their daily lives. So why do I almost always recommend a usability test as a team's first user research activity? User experience e-books Bright Ideas for User Experience Managers If you're a user experience manager (or just like to take a strategic view), start here. Usability Test Moderation: The Comic If you've been tasked with running a usability test, then you'll love this instructional guide. ISO 9241 for Beginners ISO 9241 is widely cited by user experience experts who would be hard pushed to name any other standard — but all most usability professionals know about the standard is its name. Help!
Resources · Bootstrap Expo Links to useful Bootstrap resources like additional showcases, integrations, add-ons, code snippets, and more. Suggest new resources on GitHub. Add-ons Bootstrap Select A custom select menu for Bootstrap using the provided button dropdowns. Bootstrap File input Enhances the default file input with file preview for images and text, multiple selection, and more. Showcases Built with Bootstrap A showcase of sites and apps built with Bootstrap. Themes ThemeForest Bootstrap templates from ThemeForest, a marketplace for premium themes and templates. Code CodeCanyon Bootstrap plugins and skins from CodeCanyon, the largest script and code marketplace on the web. Miscellaneous Bootstrap OmniGraffle Stencil OmniGraffle stencil, template, and color picker modeled after Bootstrap.
Getting started Bootstrap (currently v3.3.6) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs. Bootstrap Compiled and minified CSS, JavaScript, and fonts. Download Bootstrap Source code Source Less, JavaScript, and font files, along with our docs. Download source Bootstrap CDN The folks over at MaxCDN graciously provide CDN support for Bootstrap's CSS and JavaScript. Install with Bower You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using Bower: $ bower install bootstrap Install with npm You can also install Bootstrap using npm: $ npm install bootstrap require('bootstrap') will load all of Bootstrap's jQuery plugins onto the jQuery object. Bootstrap's package.json contains some additional metadata under the following keys: Install with Composer You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using Composer: $ composer require twbs/bootstrap <! Grids Navbar
UXmatters :: Insights and inspiration for the user experience community TwitterBootstrapMVC A Simple Bootstrap Tutorial | Toptal If you’re doing anything web related, chances are you’ve heard about Bootstrap. If by now you still don’t know what Bootstrap is, or you just want to find a bootstrap tutorial for beginners to get a better overview of what it is and what it does best, you’ve come to the right place. Bootstrap is a powerful toolkit - a collection of HTML, CSS, and JavaScript tools for creating and building web pages and web applications. After its open source release in 2011, Bootstrap became popular very quickly, and not without reason. With Bootstrap, web developers can concentrate on the development work, without worrying about design, and get a good looking website up and running quickly. Getting Started with this Bootstrap Tutorial Bootstrap is available in two forms; as a precompiled version, and as a source code version. The source code version comes styles source code written in Less (or Sass), all the JavaScript, and accompanying documentation. File Structure Basic HTML Template <! <head> ... <!
Patterns in Interaction Design Bootstrap Fireworks | Today’s post is about … A UI Toolkit for Twitter Bootstrap version 2.0. The entire UI recreated as vector images for Adobe Fireworks. (Fw PNG) Hey, that’s not an extension! Ok, so this is not about a Fireworks extension, but its the only Fireworks blog that I can post to. Bootstrap, from Twitter Bootstrap is a neat little html, css and javascript toolkit that lets you create web apps quickly and easily. That is, if you can code. I was using Bootstrap the other week for a personal project that I am currently working on. What about non coder designers? Not all designers are coders. So what is in it? Other designers had created their own Bootstrap ui toolkits for Fireworks, but the fidelity was more for wireframing. Because they are all vector images, you can select the points and extend them out or in as much as you need to. All of the states are in there too. The Glyphicons provided are in a sprite for use in css. All of the UI components are organized in pages within Fireworks. Some screenshots
CSS Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development. HTML5 doctype Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects. <!DOCTYPE html><html lang="en"> ... Mobile first With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>. You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag. Bootstrap sets basic global display, typography, and link styles. Set background-color: #fff; on the body Use the @font-family-base, @font-size-base, and @line-height-base attributes as our typographic base Set the global link color via @link-color and apply link underlines only on :hover These styles can be found within scaffolding.less. Normalize.css Containers
Downloads » Cone Trees- User Research & Design The Usability Testing Process (diagram) March 14, 2010 Chinese translation of the diagram and article (by Ryana). Russian translation of the diagram and article (by Dmitry Satin). Are you interested in a high-res print out of this diagram for putting up on the cork board by your office desk? Download the A4 Poster PDF for free.Usability Testing Process Poster (A4 PDF) (downloaded 2157 times) Send me a pic: Did you put it up at work? A usability test consists of the following steps: 1- Usability test planning 2.1- Participant Recruitment 2.2 Scenario & Task creation 3- Execute the usability test/ conduct usability test sessions 4- Data Analysis 5- Reporting 6- Usability test recommendation incorporation checkpoint I will follow up with another post to explain the steps in detail, but for now, here is some detail on step 6. After you report the usability test findings and recommendations, stakeholders will agree to incorporate a certain number of recommendations. June 24, 2009 June 1, 2009
组件 · Bootstrap 用于显示链接列表的可切换、有上下文的菜单。JavaScript 下拉菜单插件让它有交互性。 案例 将下拉菜单触发器和下拉菜单都包裹在.dropdown里，或者另一个声明了position: relative;的元素。然后添加组成菜单的HTML代码。 <div class="dropdown"><button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span></button><ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li><li role="presentation" class="divider"></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li></ul></div> 对齐选项 给下拉菜单.dropdown-menu加上.pull-right 使文字右对齐。 <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel"> ... 在任何下拉菜单中均可通过添加标题来标明一组动作。 禁用的菜单项 给下拉菜单中的<li>加上.disabled禁用链接。 用按钮组把一组按钮放在同一行里。 按钮组中的工具提示和弹出框需要特别的设置 基本案例 按钮工具栏 尺寸 嵌套 尺寸
Quick Recipes & Easy Recipe Ideas - Tablespoon Patterns : Designing Interfaces Selected patterns from the book are featured here on the website, in their entirety. Here are all of the patterns in the second edition of the book, sorted by chapter. Most of these patterns are not online yet, but many of them will become available over time as featured patterns. Patience! What users do Patterns of user behavior Safe Exploration Instant Gratification Satisficing Changes in Midstream Deferred Choices Incremental Construction Habituation Microbreaks NEW Spatial Memory Prospective Memory Streamlined Repetition Keyboard Only Other People’s Advice Personal Recommendations NEW Getting around Navigation, signposts, and wayfinding Clear Entry Points Menu Page NEW Pyramid Modal Panel Deep-linked State NEW Escape Hatch Fat Menus NEW Sitemap Footer NEW Sign-in Tools NEW Sequence Map Breadcrumbs Annotated Scrollbar Animated Transition Organizing the page Lists of things Images, messages, search results, etc. Doing things Going mobile