These are simple examples of usable feature that you can add to your website. You can also combine two or more features to provide better usability, and it will be great if you come up with your own feature that considers one of the three aspects of usability. Again, these are only examples, and usable features are not limited to only these.

• Placeholder
  

  Placeholder is great for simplifying your design because it not only serves as an input area but it also provides user some information about what to type in. This feature will be effective on forms, such as login page or registration page.

  
  


• Internationalization
  

  An user will use a website easily if the website is in the user's most comfortable language. Internalization allows users to select the best language that they can understand. Although internalization takes a lot of effort (for translation and coding), it greatly increase learnability and even other two aspects of usability.

  Hello Ethiopia!

  Amharic
  English


• Warning
  

  A warning pop-up is an effective way to let user know some information because an user cannot miss it. This is esapecially effective at preventing error or letting user know what they are doing wrong. However, too frequent use of warning can distract user and degrade efficiency.

  You will get an alert


• Breadcrumb
  

  The more complex website you have, the more you are prone to be lost. A breadcrumb helps user know their current position in a website and allows them to directly move to ancestral pages, boosting learnability and efficiency.

  Home > Announcements


• Auto complete
  

  When you have to get some input from an user, user may not type in the way you wanted. This may cause errors and it may even make your website less learnable. Auto-complete feature helps user to correctly type input and it also suggests user what kind of available options they have.



• Interactive map
  

  If you have to present some information, it will be good if an user can search or get more details on the information they want. In the case of a map, a user may find a movable map more usable than a static image of a map. Interactive map from Google can allow user to zoon in/out image, move around the map, and even provides details.



• Vertical align vs. horizontal align
  

  Try to click "Btn1" and then click "Btn4" for each alignment. It usually takes less time(efficiency) when the buttons or elements are aligned vertically because it requires less steering effort to click another. Now, try to click "Btn1" and then click "Btn2", back to "Btn1" and "Btn3", and back to "Btn1" and "Btn4". In this time, the horizontal alignment will help you click buttons more accurately(safety) as the spacing of the buttons allows clear distinction while the vertical spacing is compacted. Vertical and horizontal alignments have their own benefits, so when designing a list of elements, please think about which aspect of usability is more important

  Btn1 Btn2 Btn3 Btn4

  Btn1 Btn2 Btn3 Btn4

• Mouse hovering
  
  [HTML code]
  

  <div style="width: 100px; height: 100px; background-color: yellow; text-align: center" onmouseover="mouseover(this)" onmouseout="mouseout(this)">mouse in</div>

  [JavaScript code]
  

    function mouseover(ele){
      ele.innerHTML = "mouse out";
    };
  
    function mouseout(ele){
      ele.innerHTML = "mouse in";
    };
                    

  mouse in


• Counter
  
  [HTML code]
  

  <div style="width: 100px; height: 100px; background-color: cyan; text-align: center" onclick="count(this)">0</div>

  [JavaScript code]
  

    var cnt = 0;
    function count(ele){
      cnt++;
      ele.innerHTML = cnt;
    };

  0


• Change style
  
  [HTML code]
  

  <div state="true" style="width: 100px; height: 100px; background-color: green" onclick="change_color(this)">Change color</div>

  [JavaScript code]
  

    function change_color(ele){
      if(ele.getAttribute("state") == "false"){
        ele.setAttribute("state", "true");
        ele.setAttribute("style","width: 100px; height: 100px; background-color: green");
      }
      else{
        ele.setAttribute("state", "false");
        ele.setAttribute("style","width: 100px; height: 100px; background-color: blue; color: white");
      }
    };

  Change color


• Object.getElementById()
  
  [HTML code]
  

  <div id="orange_box" style="width: 100px; height: 100px; background-color: orange">Box</div>
  <button onclick="orange()">click</button>

  [JavaScript code]
  

    function orange(){
      document.getElementById("orange_box").innerHTML = "ORANGE Box";
    };

  Box

  click


• Timer
  
  [HTML code]
  

  <font id="time">0.00</font> sec<br>
  <button id="start_timer" onclick="start_timer()">Start!</button> <button id="end_timer" onclick="end_timer()" disabled="true">Stop!</button>

  [JavaScript code]
  

    var timer = false;
    function start_timer(){
      var time = 0;
      timer = true;
      var counter = setInterval(function(){
        if(!timer)
          clearInterval(counter);
        time++;
        document.getElementById("time").innerHTML = time/100;
      }, 10);
      $("#start_timer").attr("disabled", true);
      $("#end_timer").attr("disabled", false);
    };
    function end_timer(){
      timer = false;
      $("#start_timer").attr("disabled", false);
      $("#end_timer").attr("disabled", true);
    };

  0.00 sec
  Start! Stop!


• Disappearing button
  
  [HTML code]
  

  <div id="disappearing">
      <button onclick="disappear()">Click me!</button>
  </div>

  [JavaScript code]
  

    function disappear(){
      document.getElementById("disappearing").innerHTML = "";
    };

  Click me!

These are some examples of features that are implemented with jQuery. Use these examples only as the starting point of your implementation. You may need complex coding to implement the features you want. If you have any problem with the implementation, ask the instructors for help.

• A simple adder
  
  [HTML code]
  

   <button id="add_button">Add</button> <input style="width: 30px" id="num1"/> + <input style="width: 30px" id="num2"/> = <font id="add_result">0</font>

  [jQuery code]
  

    $("#add_button").click(function(){
      var num1 = parseInt($("#num1").prop("value"));
      var num2 = parseInt($("#num2").prop("value"));
      $("#add_result").html(num1+num2);
    });

  Add + = 0


• Changing an image
  
  [HTML code]
  

   <img id="img" state="firefox" src="./firefox.gif"> <button id="img_change">Change!</button>

  [jQuery code]
  

    $("#img_change").click(function(){
      if($("#img").attr("state") == "chrome"){
        $("#img").attr("src", "./firefox.gif");
        $("#img").attr("state", "firefox")
      }
      else{
        $("#img").attr("src", "./chrome.gif");
        $("#img").attr("state", "chrome");
      }
    });

  Change!


• A counter
  
  [HTML code]
  

   <button id="counter">+1</button> <font id="count">0</font>

  [jQuery code]
  

    var global_counter = 0;
  
    $("#counter").click(function(){
      global_counter++;
      $("#count").html(global_counter);
    });

  +1 0


• Random generator
  
  [HTML code]
  

  <div id="random">?</div><button id="generate">Generate!</button>

  [jQuery code]
  

    $("#generate").click(function(){
      $("#random").html(Math.random());
    });

  ?
  Generate!