This document provides guidelines for building a user-friendly website with four key concepts: usability, adherence to standards, engagement of users, and consistency. It emphasizes making the site intuitive to use through clear information architecture and navigation. Standards like intuitive linking, use of white space, and consistent styling of elements like tables and documents are covered. The importance of concise, scannable content that simplifies information for users is also discussed. Maintaining consistency across all design elements throughout the site is stressed.
HTML5 Page layout and navigation: Creating navigational aids: planning site organization, creating text based navigation bar, creating graphics based navigation bar, creating graphical navigation bar, creating image map, redirecting to another URL, creating division based layouts: HTML5 semantic tags, creating divisions, creating HTML5 semantic layout, positioning and formatting divisions.
Many business websites look beautiful but are painfully ineffective. This seminar will walk through the basic steps of developing an effective website that really works for your buisness.
About four years ago, I wrote a blog post about Web flowcharts design. It was, and still is, very popular. Today, I'm thrilled to publish the long-waited follow-up article: The definitive guide to Web flowcharts.
The new guide is pretty comprehensive. It covers the most common topics about flowcharts design, from basic ideas to visual vocabulary, from examples to suggestions and tips, from tools for drawing flowcharts to templates and stencils.
Find more information at http://dingyu.me/blog/the-definitive-guide-to-web-flowcharts
Parallax, responsive, card, and flat design are only a few modern Web Design trends that have taken the web by storm. I have listed 40 in this article, though I’m quite certain there’s more. So if you guys have spotted any modern trends that I’ve missed, just holla in the comments.
http://www.equinetacademy.com/latest-web-design-trends/
HTML5 Page layout and navigation: Creating navigational aids: planning site organization, creating text based navigation bar, creating graphics based navigation bar, creating graphical navigation bar, creating image map, redirecting to another URL, creating division based layouts: HTML5 semantic tags, creating divisions, creating HTML5 semantic layout, positioning and formatting divisions.
Many business websites look beautiful but are painfully ineffective. This seminar will walk through the basic steps of developing an effective website that really works for your buisness.
About four years ago, I wrote a blog post about Web flowcharts design. It was, and still is, very popular. Today, I'm thrilled to publish the long-waited follow-up article: The definitive guide to Web flowcharts.
The new guide is pretty comprehensive. It covers the most common topics about flowcharts design, from basic ideas to visual vocabulary, from examples to suggestions and tips, from tools for drawing flowcharts to templates and stencils.
Find more information at http://dingyu.me/blog/the-definitive-guide-to-web-flowcharts
Parallax, responsive, card, and flat design are only a few modern Web Design trends that have taken the web by storm. I have listed 40 in this article, though I’m quite certain there’s more. So if you guys have spotted any modern trends that I’ve missed, just holla in the comments.
http://www.equinetacademy.com/latest-web-design-trends/
Plug your own content in to this presentation in order to present your ideas clearly to remote clients, save time, apply to more projects quicker and ultimately win more pitches.
Download the template at:
http://startloaded.com/resources-for-digital-nomads/presentation-template-for-remote-web-design-projects/
Editable contents of the template
1. Project overview
2. Project features
3. Proposed website structure
4. Mood-board
5. Web development process
6. Project time-line
7. Pricing
8. Contact details
An over view on some of the overlooked off page seo technique INDIAN SEO COMPANY
The SEO or Search Engine Optimization techniques is not only to be surrounded by similar techniques. The presentation helps you know about some off bit Off page strategies. You need to click on to http://www.indian-seo-company.com/ for furthur details
Members of Connect: Professional Women’s Network share tips for launching a successful website.
Connect: Professional Women’s Network is online community with more than 350,000 members that discusses issues relevant to women and their success. The free LinkedIn group powered by Citi also features videos interviews with influential businesswomen, live Q&As with experts and slideshows with career advice. To learn more and join the conversation in the largest women's group on LinkedIn, visit http://lnkd.in/womenconnect.
Cirrus ABS, in partnership with Element Three, presented it's Search Engine Optimization (SEO) seminar in Indianapolis. This is the second in a four part series to show businesses how to leverage the investment you have made in your website and how to integrate your offline marketing efforts with your website. Integrated into these slides are specific search engine optimization action items to help you enhance the effectiveness of your website.
BROEKMAN communications has a 14-year track record of developing websites with branding, marketing, business development, social media, SEO and PR front-and-center!
Our core offering now is website development using WordPress. From helping translate your vision & acting as your art director/creative director, BROEKMAN communications builds amazing high-end websites as YOUR dedicated programmer.
This template is designed to give some structure and helpful perspective on how to prepare a proposal of for website redesign. You could also use Word, but as a leave behind, this is a helpful piece.
Create your own attribute system on a scale of 1-5 to rank the competition, average it all out and voila. Show that you're on top of the competition and are designing the website with the big picture in mind.
Make 'em say wow!!
Plug your own content in to this presentation in order to present your ideas clearly to remote clients, save time, apply to more projects quicker and ultimately win more pitches.
Download the template at:
http://startloaded.com/resources-for-digital-nomads/presentation-template-for-remote-web-design-projects/
Editable contents of the template
1. Project overview
2. Project features
3. Proposed website structure
4. Mood-board
5. Web development process
6. Project time-line
7. Pricing
8. Contact details
An over view on some of the overlooked off page seo technique INDIAN SEO COMPANY
The SEO or Search Engine Optimization techniques is not only to be surrounded by similar techniques. The presentation helps you know about some off bit Off page strategies. You need to click on to http://www.indian-seo-company.com/ for furthur details
Members of Connect: Professional Women’s Network share tips for launching a successful website.
Connect: Professional Women’s Network is online community with more than 350,000 members that discusses issues relevant to women and their success. The free LinkedIn group powered by Citi also features videos interviews with influential businesswomen, live Q&As with experts and slideshows with career advice. To learn more and join the conversation in the largest women's group on LinkedIn, visit http://lnkd.in/womenconnect.
Cirrus ABS, in partnership with Element Three, presented it's Search Engine Optimization (SEO) seminar in Indianapolis. This is the second in a four part series to show businesses how to leverage the investment you have made in your website and how to integrate your offline marketing efforts with your website. Integrated into these slides are specific search engine optimization action items to help you enhance the effectiveness of your website.
BROEKMAN communications has a 14-year track record of developing websites with branding, marketing, business development, social media, SEO and PR front-and-center!
Our core offering now is website development using WordPress. From helping translate your vision & acting as your art director/creative director, BROEKMAN communications builds amazing high-end websites as YOUR dedicated programmer.
This template is designed to give some structure and helpful perspective on how to prepare a proposal of for website redesign. You could also use Word, but as a leave behind, this is a helpful piece.
Create your own attribute system on a scale of 1-5 to rank the competition, average it all out and voila. Show that you're on top of the competition and are designing the website with the big picture in mind.
Make 'em say wow!!
World forest institute_fellowship_program_2016_final_presentation_nicaragua_a...World Forestry Center
Andrea Cornejo is our 2016 World Forest Institute International Fellow from Nicaragua.
Presentation video: https://youtu.be/aHRZozfD51c?list=PL1XBY4Mor-H2zQG70aMCcUGAxoFy_aWmn
-Andrea Cornejo holds a Masters of Environmental Management from The University of Queensland in Australia.
-She works as an Environmental Consultant for the University of Central America
-Her Fellowship project focused on conducting a “Comparison between the Pacific Northwest and Nicaragua private forestland owners”
Literator Tech Inclusion Startup Showcase 2016Jing Jin
90% of students who do not complete high school were struggling readers in the third grade. This literacy gap disportionately affects students of color and students in poverty. Failure to address this problem only perpetuates the cycle. The challenges compound as students move through the educational system without adequate support. Literator removes the hurdles teachers encounter when offering students direct instruction. At a higher level, we’re alerting administrators to critical areas in need of reading intervention. This directly results in a greater understanding of where to allocate scarce resources. Teachers have expressed to us how difficult it is to serve students who are so far behind without additional resources or training. Parents are often left without specific strategies to support their students at home due to inability to meet with teachers or language barriers. These are problems that we have addressed by design. By closing the feedback loop we are ensuring all students, regardless of background, will benefit from direct instruction and no student gets left behind.
Content Management & Page Structure - Best Practices for Structuring Content ...D'arce Hess
Presented at SPTechCon Boston 2016. This presentation is a base line for end-users and business users to be able to structure content in SharePoint and O365 without needing to be a developer or designer.
Today’s sophisticated internet users have high expectations when it comes to their experience using a website or an app. They are quick and impatient and also have shorter attention span – thanks to new mobile technologies that contributed significantly to this shift in Internet user behavior. You only get a few seconds to grab the user’s attention to check out your website or app and once he is on-board, you get only a few seconds to impress the user by providing great user experience which in turn increases the session duration or the time user spends on your website or app. As you know great user experience also results in repeat visits and better conversion rate.
Website usability ideas for business growthJames Smith
Website usability is about creating your website in such a manner that your website visitors can find what they're looking for quickly and easily. A usable website can bring in huge benefits on to your website and your business.
[DevDay 2017] Using analytics, focusing on SEO and unability - Keys to develo...DevDay.org
Competition for customers time and money is high and growing, especially in local and regional markets. Developers need to do more than just deliver functionality and good code. They must work with others on their teams to develop sites and apps with an eye on actual user data from Analytics, SEO research, and usability. We will talk about how a developer or a team can get into such a mindset.
Top 7 Ways To Improve Teams And SharePoint Navigation In Your Digital WorkplaceRichard Harbridge
70% of people start their journey by navigating. It is at the very heart of an effective digital workplace. Improving the navigation experience is Intranet's number one priority, and it often is not effectively designed or implemented. Navigation is also foundational for integration, automation, security, and many other essential areas of digital workplace investment. Poor navigation creates unnecessary inefficiencies and dependency on already overburdened resources to fill the navigation gaps with their time and effort directing requests, linking digital workspaces, essential applications, and more.
The good news is that organizations employ proven designs and best practices today to overcome these challenges. Join Richard Harbridge, a Microsoft MVP and internationally recognized expert on Microsoft 365 and the Digital Workplace, as he shares insight on how to better plan, design, personalize, configure, integrate, and enhance navigation for your Intranet and Digital Workplace. In the end, there will be a Q&A session.
Richard Harbridge is the Chief Technology Officer and owner of 2toLead and a Microsoft MVP. Richard works as a trusted advisor with hundreds of organizations, helping them understand their current needs, future needs, and what actions they should take to grow and achieve their bold ambitions.
If we keep the conventional wisdom aside, coding is not the most important part of the website development life cycle. Actually, it is secondary. What is more important is the planning and strategizing the entire process and ensuring that it meets the client’s need.
2. The Four Concepts
1) Make it Usable
2) Stick to the Standards
3) Engage & Simplify
4) Keep it Consistent
3. Make it Usable
What is Usability?
Usability refers to the quality of a user's experience when
interacting with the website; the effectiveness, efficiency and the
overall satisfaction of the user. It consists of a combination of
factors including:
Intuitive design: a nearly effortless understanding for the user of the
architecture and navigation of the site.
Ease of learning: how fast a user who has never seen the user interface
before can accomplish basic tasks.
Efficiency of use: How fast an experienced user can accomplish tasks.
Memorability: after visiting the site, if a user can remember enough to use it
effectively in future visits.
Subjective satisfaction: If the user likes using the website.
4. Make it Usable
What are the Evaluation Methods?
The key to developing highly usable sites is employing
user-centered design such as:
Focus groups, surveys or interviews to establish user goals.
Card Sort testing to assist with IA development.
Wireframe & IA testing to evaluate navigation.
Creating and testing engaging graphic elements (icons, workflow
diagrams, task driven infographics).
First click testing to ensure users follow the right path.
Usability testing to gauge user interaction end-to-end.
Satisfaction surveys to see how the site fares.
5. Make it Usable
Information Architecture – What is it?
IA is the art and science of organizing and labeling websites.
IA makes finding and using information easier to support findability
and usability.
An effective IA will assist users in understanding and interacting with
the site and can mean the difference between users quickly
embracing a site, or becoming frustrated and disengaged.
IA is putting in place the organization required to connect people to
the content they need. Some methods of achieving this are:
Card Sort testing to assist with IA development.
Focus groups, surveys or interviews to
establish user goals.
6. Make it Usable
Information Architecture – How to make it usable?
Sound IA methodology should focus on what users are trying to
accomplish and should speak to the following questions:
Why are we doing this project? What is it’s Purpose?
It’s critical to understand the business goals & ensuring we are
helping the organization to achieve its larger goals.
Who are we communicating with? Who are the users?
What makes them different? What makes them the same?
What does each audience need to achieve the goal?
What information do users need to meet their goals?
If you think in terms of these “Personas” rather than
one solid mass of users you can create navigation
and content that is specific to the end user’s need.
7. Make it Usable
Information Architecture – How to make it usable?
Once you have determined your audiences and their
needs & goals you should:
Determine the buckets or content groupings.
Create a high level visual sitemap (2-3 levels).
Work with the business stakeholders
to confirm / refine.
Conduct high level IA testing to
evaluate the suggested navigation.
Create a detailed sitemap to account
for needed sections and pages (all levels).
8. Make it Usable
Site Navigation – How is this different from IA?
IA defines what will be part of the site; Site Navigation defines how the
user will navigate the site.
Usability dictates that the user should never have to guess where they
are in a site and should always have a clear indication of what section
they are in and what page they are on. In order to achieve effective site
navigation there should be:
Primary Navigation allows the user to navigate all the top levels of the site. It
is the same on all pages, no matter what! Various kinds exist such as: mega-
menus, fly-out menus and sub menus.
Page Navigation is on every page and allows the user to access all pages in
a section or sub section. The page navigation should indicate what section
and page they are viewing in the navigation.
Breadcrumbs are also on every page and allow the user to access all pages
in a section or sub section and should also indicate what section and page
they are viewing in the navigation.
9. Make it Usable
Information Architecture – How to maintain it?
Ensure that new requests follow the same guidelines.
Don’t add a section or page for it’s own sake.
Make sure their is a valid reason for adding it and that it continues to
meet business goals and end user needs.
Ensure that it is accessible.
All pages* should be accessible from the site navigation.
Do not use redirects or “one off” pages that aren’t accessible.
This compromises usability and findability.
*One exception to this rule may be campaigns.
Document it.
Keep an up to date sitemap.
10. Stick to the Standards
80% of Web usability insights from the 1990s are still current
or potential problems today.
In 1995, the enemies of usability said that user testing might be a
good way to improve applications, but that it didn't work for websites.
In 2000, the enemies of usability said that the usability guidelines
might be fine for static websites, but that I* was crazy in warning
against excessive use of Flash, which "obviously" made for more
exciting, dynamic sites.
Now, the enemies of usability say that while I* was perhaps right
about the early Flash problems, it's not reasonable to apply
traditional usability guidelines to “Web 2.0”.
“He who laughs last, laughs best”
*Jacob Nielsen
11. Stick to the Standards
So what are the Standards? The basics...
Don’t use spaces in page names, documents/assets, if possible.
Use full name or searchable terms in page and document naming.
This helps with SEO and findability.
Do not use acronyms, until they are commonly known (ex: WHO, UPS).
Make it usable and readable.
Use web friendly content and imagery.
Stay away from unnecessary stock imagery, if possible.
Be as consistent and quality driven as possible.
Be matchy-matchy, but with context, contrast and purpose.
12. Stick to the Standards
The basics cont...
Always give an indication of future activity.
Users should always know where they are going and what to expect before
they do it.
Add alt tags to links, images and images w /links (slideshow or banner).
Videos (do not auto play); allow the user to play if desired.
Calls to action: message of prescribed action.
Buttons should be used very sparsely and only used when attached
to a form (submit, cancel) or type of action
where an action is required to submit information.
Create landing page grids for area related topics.
These should be planned in advance and there
should be a few options, depending on what level
of the site you are creating the grid.
13. Stick to the Standards
Hypertext Links...
To maximize the visibility and clickability of a link, make the
color obvious and distinct from the rest of the copy or underline the
link text. Users shouldn't have to guess or scrub the page to find out
where they can click.
Underlined links are important for low-vision users' accessibility, so retain
underlines if accessibility is a priority.
Click Here does not belong on a website. Ever! Instead:
Embed the link in the content.
Place it first or last part of a body of copy.
Create a call to action such as Learn More >>
Download the Supportive Housing List >
(you can create emphasis using carrots (>, >>)).
14. Stick to the Standards
Hypertext Links cont.
If a link is going to an external location; open it in a new window.
Indicate that link is for an external location; no surprises please.
Strive to keep the user on the site. Don’t give them a reason to leave.
Links intermingled or part of body text should have an emphasis
state (hover change ) and a visited state (already viewed).
Do not create links to portions of content in a document.
Documents are intended to be a full version or a takeaway.
If a section of content exists in a document that needs
to be featured, create a treatment or a sub page,
depending on the length of the content.
If a corresponding document exists, make it
available for download on related pages.
15. Stick to the Standards
Use space wisely...
White space is good for clarity, but too much of it can make a page look
empty.
Choose a template that fits the purpose (2 or 3 column).
If there is not much content on a page, you may want to opt for a 3 column
layout that has the ability to enter marketing content (calls to action).
This will also create an opportunity to cross promote materials and concepts.
If the content is long, you may want to use a 2 column layout.
You will have less of an opportunity for marketing,
but more white space makes the content seem less busy.
If the content is exceptionally long, it may require the
use of content treatments such as tabs or expand/collapse
or new sub-pages to be created.
16. Stick to the Standards
Use of Tables...
Standardize the look and feel of tables.
This creates consistency and adds to the aesthetic.
Ensure tables are aligned nicely, and indicate rows & columns clearly.
Table headings should be clearly visible and match the site branding.
Tables should be no wider than the content area where it resides.
Limit the amount of content that is entered for a description.
Large buttons or marketing items should not compromise
the tables for their own sake.
Anticipate needs for all table types and
create custom classes.
This will reduce the difference in tables look & feel.
17. Stick to the Standards
Document fundamentals...
Ensure documents are displayed the same way others in the site, or in
pre-indicated style depending on location.
Indicate that a link to a document is a document link, not a regular link
to a page or external site.
Use a phrase such as: Download Report Now >>
State type and size of document (use type icon if possible).
Always open in a new window; so user not forced to click Back.
If using an image; indicate if clickable. Make action clear.
Ensure document aligns with branding standards.
If document does not align with standards, send it back.
Create balance when a list of documents is available.
18. Stick to the Standards
List fundamentals...
Ensure lists are displayed the same way others in the site, or in
pre-indicated style depending on location.
Ordered lists & unordered lists should be programmed in the CSS.
If a list was copied over from Word or Notepad, it will need to be stripped
and formatted correctly.
If a list does not appear to be formatted, it likely isn’t.
When using a list to link to content on the same page, assuming no
superior method exists, place Back to Top links in the page.
The user should be able to navigate the page effectively.
This is old functionality and should not be needed.
19. Engage & Simplify
Content is [still] king.
Content is the smallest budget item but is just as important as design and
function.
Approach the content emotionally:
K.I.S.S.!
Chunk the content! (clear headlines and delineation of ideas).
Use images & video.
Encourage engagement! (through conversation & sharing).
A focussed page tells the user what we want
them to do and why.
Find interesting ways to display information.
Content treatments (Tabs / expand).
Icons, infographics, flow imagery.
20. Engage & Simplify
User Experience Honeycomb
Factors that Influence UX
Create content that
is valuable for the
end user and
applicable to the
audience type; client,
partner, applicant,
municipality etc.
21. Engage & Simplify
Factors that Influence UX
Useful: Your content should be original and fulfill a need.
Usable: Site must be easy to use.
Desirable: Image, identity, brand, and other design elements are used
to evoke emotion and appreciation.
Findable: Content needs to be navigable
and locatable onsite and offsite.
Accessible: Content needs to be
accessible to people with disabilities.
Credible: Users must trust and believe
what you tell them.
22. Engage & Simplify
Creating Content for the Web…
Get the message across as quickly …say as little as possible.
Say LESS. This is the most important thing about writing for the web.
Because web users are generally scanning, not reading, the more
concise the content, the easier it is to scan. Be short and succinct.
Use Headlines and headings; they are larger and high-contrast, so
they attract the eye, making relevant content more visible.
Consider the user’s goals;
The imperative voice (commanding) is attention-grabbing
and helpful, so it should go at the front of a phrase.
Use the active voice. Active good, Passive bad.
This is because passive voice uses slightly more
words than Active, and takes slightly more decoding.
23. The Traditional Content Pyramid
Consider the traditional format
Now completely invert it.
80% of the most important
info should be above the fold.
Audience
& Priority
TITLE
INTRODUCTION
Short, Simple,
“Above the Fold”
THE PROOF
Detailed reasons to believe
you’ve got me this far
CALLS TO ACTION
What’s next – How can I act on the info?
25. Engage & Simplify
Areas Related to Building the User Experience
User Research focuses on understanding user behaviors, needs, and motivations
through observation techniques, task analysis, and other feedback methodologies.
Usability Evaluation focuses on how well users can learn and use a product to achieve
their goals. It also refers to how satisfied users are with that process.
(IA) focuses on how information is organized, structured, and presented to users.
User Interface Design focuses on anticipating what users might need to do and ensuring
that it has elements that are easy to access, understand, and facilitate.
Interaction Design (IxD) focuses on creating engaging sites with well thought out
behaviors.
Visual Design focuses on ensuring an aesthetically pleasing interface that is in line with
brand goals.
Content Strategy focuses on writing and curating useful content by planning the
creation, delivery and governance behind it.
Accessibility focuses on how a disabled individual accesses or benefits from a site.
Web Analytics focuses on the collection, reporting, and analysis of website data.
26. Engage & Simplify
Using compelling and engaging graphics:
Use Icons related to the subject.
Use Infographics that describe a topic or workflow.
Add interactivity that makes the journey more engaging.
Make graphics personal, personable, applicable and professional.
Keep graphics styles consistent with others used on the site.
Do not use graphics/imagery for it’s own sake.
Using stock imagery takes away from the user experience.
Make it relevant, make it aesthetic, make it real.
27. Keep it Consistent
Keep it Consistent, Keep it Consistent, Keep it Consistent!
Use all elements mentioned above similarly throughout the site.
No matter what, be consistent. If you do something once, do it throughout.
The site styles should offer several options for each element such as
lists, tables, documents, calls to action etc.
It is up to the content contributor to ensure that web guidelines are followed
to maintain consistency throughout the site and that correct styles are used
as they were intended.
Ensure all images comply with the style guide.
Size ratio, specific height & width parameters and optimization.
Do not increase or decrease an image size falsely.
All images of a certain type should have similar
treatments (border, shadow, neither).
28. Keep it Consistent
And some other things to watch for…
Ensure all pages and tables have cell padding. Content that butts right
up against the edge of the content area looks unprofessional.
These types of things should be set up
in the code/templates, but if it isn’t,
send it back (unless your waiter is a fly).
Footers should be aligned to the bottom.
Sometimes the content in a page is not
enough to fill a page and footers float;
floating pages do not look good.
Images that get cut off. Ensure that the
images fits the space intended.
What else???