Mobile (347) 525-3378 • Skype (347) 537-6925 richard@cyberpagedd.com

Comments on UI and Web Design

Website Design & Development Uncategorized Comments on UI and Web Design

Uncategorized

Comments on UI and Web Design

Posted By Richard

Over the past 15 years I’ve done UI design and front-end prototyping with expertise in Adobe applications. I’m dedicated to teamwork with good communication and problem-solving, analytical skills. I’m creative, and conscientious with meticulous attention to detail.

This blog contains many comments on UI and Web Design strategies.

10 thoughts on “Comments on UI and Web Design

  1. The Smartphone is the new laptop. Baby boomers are holding all the cash and need a simple and direct user interface.

    Mobile Site vs. Full Site
    Summary:
    Good mobile user experience requires a different design than what’s needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work.
    1) Build a separate mobile-optimized site (or mobile site) if you can afford it. When people access sites using mobile devices, their measured usability is much higher for mobile sites than for full sites.
    2) A mobile app might be even better — at least for now.
    3) If mobile users arrive at your full site’s URL, auto-redirect them to your mobile site. Sadly, many search engines still don’t rank mobile sites high enough for mobile users, so people are often (mis)guided to full sites instead of the mobile ones, which offer a vastly superior user experience.
    4) Offer a clear link from your full site to your mobile site for users who end up at the full site despite the redirect.
    5) Offer a clear link from your mobile site to your full site for those (few) users who need special features that are found only on the full site.

    Guidelines for the mobile-optimized site
    1) cut features, to eliminate things that are not core to the mobile use case;
    2) cut content, to reduce word count and defer secondary information to secondary pages; and
    3) enlarge interface elements, to accommodate the “fat finger” problem.

    For the vast majority of tasks, mobile users will get a vastly better user experience from a well-designed mobile site than from the full site. For a small minority of tasks, mobile users will be slightly delayed by the extra click to the full site.

    The basic point? The desktop user interface platform differs from the mobile user interface platform in many ways, including interaction techniques, how people read, context of use, and the plain number of things that can be grasped at a glance. This inequality is symmetric: mobile users need a different design than desktop users.

    But, just as much, desktop users need a different design than mobile users.

    Excerpted from: Jakob Nielsen’s Alertbox, April 10, 2012

    Because you can’t properly design a website for a desktop and mobile device in one – because of the huge difference in screen size f.e. – this is what I do:

    First I design the desktop website, mostly with a XHTML 1.0 Strict DOCTYPE < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">, but there is nothing wrong with using your HTML 4.01 Strict DOCTYPE either.

    Then, after I have finished the desktop website, I design a mobile website and put it for example on a subdomain or dotMobi domain (m.domain.com or domain.mobi). For this mobile website I use the following DOCTYPE: < !DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

    Then you can forward any mobile device, using .htaccess, or mobile_detect.php, to the mobile subdomain.

    SEE Also:
    http://www.talkphp.com/xhtml-html-css/3872-doctype-most-accessbile-mobile-cross-browser-site.html

    http://stackoverflow.com/questions/3680463/mobile-redirect-using-htaccess

  2. The Smartphone is the new laptop. Baby boomers are holding all the cash and need a simple and direct user interface.

    Mobile Site vs. Full Site
    Summary:
    Good mobile user experience requires a different design than what’s needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work.
    1) Build a separate mobile-optimized site (or mobile site) if you can afford it. When people access sites using mobile devices, their measured usability is much higher for mobile sites than for full sites.
    2) A mobile app might be even better — at least for now.
    3) If mobile users arrive at your full site’s URL, auto-redirect them to your mobile site. Sadly, many search engines still don’t rank mobile sites high enough for mobile users, so people are often (mis)guided to full sites instead of the mobile ones, which offer a vastly superior user experience.
    4) Offer a clear link from your full site to your mobile site for users who end up at the full site despite the redirect.
    5) Offer a clear link from your mobile site to your full site for those (few) users who need special features that are found only on the full site.

    Guidelines for the mobile-optimized site
    1) cut features, to eliminate things that are not core to the mobile use case;
    2) cut content, to reduce word count and defer secondary information to secondary pages; and
    3) enlarge interface elements, to accommodate the “fat finger” problem.

    For the vast majority of tasks, mobile users will get a vastly better user experience from a well-designed mobile site than from the full site. For a small minority of tasks, mobile users will be slightly delayed by the extra click to the full site.

    The basic point? The desktop user interface platform differs from the mobile user interface platform in many ways, including interaction techniques, how people read, context of use, and the plain number of things that can be grasped at a glance. This inequality is symmetric: mobile users need a different design than desktop users.

    But, just as much, desktop users need a different design than mobile users.

    Excerpted from: Jakob Nielsen’s Alertbox, April 10, 2012

    Because you can’t properly design a website for a desktop and mobile device in one – because of the huge difference in screen size f.e. – this is what I do:

    First I design the desktop website, mostly with a XHTML 1.0 Strict DOCTYPE < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">, but there is nothing wrong with using your HTML 4.01 Strict DOCTYPE either.

    Then, after I have finished the desktop website, I design a mobile website and put it for example on a subdomain or dotMobi domain (m.domain.com or domain.mobi). For this mobile website I use the following DOCTYPE: < !DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

    Then you can forward any mobile device, using .htaccess, or mobile_detect.php, to the mobile subdomain.

    SEE Also:
    http://stackoverflow.com/questions/3680463/mobile-redirect-using-htaccess

  3. Usability is a quality attribute that assesses how easy user interfaces are to use. The word “usability” also refers to methods for improving ease-of-use during the design process. Usability is defined by 5 quality components:
    Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
    Efficiency: Once users have learned the design, how quickly can they perform tasks?
    Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
    Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
    Satisfaction: How pleasant is it to use the design?

    There are many other important quality attributes. A key one is utility, which refers to the design’s functionality: Does it do what users need? Usability and utility are equally important: It matters little that something is easy if it’s not what you want. It’s also no good if the system can hypothetically do what you want, but you can’t make it happen because the user interface is too difficult. To study a design’s utility, you can use the same user research methods that improve usability.
    USABILITY 101 excerpted from Jakob Nielson’s Alertbox, 8/25/2003

  4. We have range as visual designers. We’ve designed for customers in various industries. We demonstrate a polished and professional design aesthetic. We think systematically about creating modular design systems. We understand technical considerations, such as designing for a content management system. We are effective in collaborating with interaction designers, front-end developers and other user experience professionals.

  5. Web design is the process of planning and creating a website — a collection of online content including text, images, digital media and interactive elements and applications that reside on a web server/servers. Web designers utilize markup language, most notably HTML for structure and CSS for presentation as well as JavaScript to add interactivity to develop pages that can be read by web browsers. [http://en.wikipedia.org/wiki/Web_design] The landing or home page is a summary of of the site’s main objective as well as highlights, daily updates and hyperlinks that direct viewers to a designated page within the site’s domain.

    The web design and development process spans conceptualization, research, planning, producing, post-production, advertising, as well as media control. Each project is managed either by a single person or by a team with a specific strategy based on user needs and website objectives, depending on the contract.

    Jesse James Garrett explains in his book, The Elements of User Experience, User-centered design for the Web, as a basic duality in 5 phases: “Web as a hypertext system,” or “Web as a software interface” which begin with User Needs and Site Objectives and end with Visual Design. [http://www.jjg.net/elements/pdf/elements.pdf] The agile process can be loosely defined in terms of Context, Content and Users.

  6. User interface design or user interface engineering is the design of computers, appliances, machines, mobile communication devices, software applications, and websites with the focus on the user’s experience and interaction. The goal of user interface design is to make the user’s interaction as simple and efficient as possible, in terms of accomplishing user goals—what is often called user-centered design. Good user interface design facilitates finishing the task at hand without drawing unnecessary attention to itself. Graphic design may be utilized to support its usability. The design process must balance technical functionality and visual elements (e.g., mental model) to create a system that is not only operational but also usable and adaptable to changing user needs.

    Interface design is involved in a wide range of projects from computer systems, to cars, to commercial planes; all of these projects involve much of the same basic human interactions yet also require some unique skills and knowledge. As a result, designers tend to specialize in certain types of projects and have skills centered around their expertise, whether that be software design, user research, web design, or industrial design.

  7. User Experience – Our Definition

    “User experience” encompasses all aspects of the end-user’s interaction with the company, its services, and its products. The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother. Next comes simplicity and elegance that produce products that are a joy to own, a joy to use. True user experience goes far beyond giving customers what they say they want, or providing checklist features. In order to achieve high-quality user experience in a company’s offerings there must be a seamless merging of the services of multiple disciplines, including engineering, marketing, graphical and industrial design, and interface design.
    http://www.nngroup.com/about/userexperience.html

  8. Interaction Design
    Interaction design (IxD) is “the practice of designing interactive digital products, environments, systems, and services.”[1] Like many other design fields Interaction Design also has an interest in form but its main focus is on behaviour.[1] What clearly marks Interaction design as a design field as opposed to a science or engineering field is that it is synthesis and imagining things as they might be, moreso than focusing on how things are.[2]
    Interaction design is heavily focused on satisfying the needs and desires of the people who will use the product.[2] Where other disciplines like software engineering have a heavy focus on designing for technical stakeholders of a project.

  9. User Experience Design Process

    Phase 1: Work with Client to Define Strategy
    Identify context, content and users; and then define site objectives and user needs (requirements); business goals, brand identity, success metrics.

    Phase 2: Develop Information Architecture
    Create content, structure and behavior of website using sketches, wireframes (simple prototypes), use cases, user flow.

    Phase 3: Create Look and Feel Prototype
    Use deliverables of phase 2 and a 5-7 color palette

    Phase 4: Test Prototype
    Client and other users as needed.

    “In recent years, my consulting process has become T-shaped, in part due to the gentle jabs of Peter Boersma, but mostly as a result of the fit between my expertise and the needs of my clients.

    In the first phase, I conduct research (the three circles) and work with my clients to define a user experience strategy. This narrative expression provides a necessary but insufficient platform for design.

    In the second phase, I develop the information architecture, which requires specifying the structure and behavior of a web site, software product, or interactive service, so that users can achieve goals, complete tasks, and find what they need.

    And, it’s this tangible expression of strategy, in the form of wireframes, sketches, and prototypes, that reliably translates an abstract vision into a well-grounded, actionable blueprint for design. Without that structural foundation, the strategy just hangs in space.”

    “User Experience Strategy,” 7/23/07, by Peter Morville

  10. This is from Jacob Nielsen’s “Alertbox: Minimalism in Web Design”
    New Article
    The Roots of Minimalism in Web Design

    Many of today’s most popular design trends are influenced by minimalism. This web design movement began in the early 2000s, but borrows its philosophy from earlier movements in the fields of fine art and human–computer interaction.

    http://www.nngroup.com/articles/roots-minimalism-web-design/?utm_source=Alertbox&utm_campaign=480951df91-Roots_of_Minimalism_06_29_2015&utm_medium=email&utm_term=0_7f29a2b335-480951df91-24126953

Leave a Reply

Your email address will not be published. Required fields are marked *