Difference between revisions of "Design Team/Proposals/Touchscreen/On-screen Keyboard/Examples iOS"

From Sugar Labs
Jump to navigation Jump to search
 
(15 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
===Safari search in page===
 
===Safari search in page===
 
[[File:Ios safari search ABC.PNG | 450px]]
 
[[File:Ios safari search ABC.PNG | 450px]]
 +
 +
Safari app, english keyboard, ABC, search in the page
 +
* Return key is changed to 'Search' and does invoke the search
 +
* additional navigation for the serach results added above the keyboard
 +
  
 
[[File:Ios safari search capitalize ABC.PNG | 450px]]
 
[[File:Ios safari search capitalize ABC.PNG | 450px]]
 +
 +
Safari app, english keyboard, ABC, search in the page, capitalize letters
 +
* to capitalize a letter you need to press the 'Shift' key once
 +
* the 'Shift' key is highlighted then
 +
* the capitalization is only applied to the next character and the functionality is then automatically disabled again (key returns normal)
 +
* the upper case/lower case characters are not reflected in the keyboard itself
 +
* you can not make the upper case shift functionality permanent
 +
  
 
[[File:Ios safari search .?123.PNG | 450px]]
 
[[File:Ios safari search .?123.PNG | 450px]]
 +
 +
Safari app, english keyboard, ?123, search in the page
 +
  
 
===App store search===
 
===App store search===
 
[[File:Ios appstore search.PNG | 450px]]
 
[[File:Ios appstore search.PNG | 450px]]
 +
  
 
===Maps search===
 
===Maps search===
Line 16: Line 33:
 
==Text==
 
==Text==
 
[[File:Ios_notes_eng_ABC.PNG | 450px]]
 
[[File:Ios_notes_eng_ABC.PNG | 450px]]
 +
 +
Notes app, english keybard, ABC
 +
  
 
[[File:Ios notes eng .?123.PNG | 450px]]
 
[[File:Ios notes eng .?123.PNG | 450px]]
 +
 +
Notes app, english keybard, .?123
 +
  
 
[[File:Ios notes de ABC.PNG | 450px]]
 
[[File:Ios notes de ABC.PNG | 450px]]
  
−
[[File:Ios notes de .?123.PNG | 450px]]  
+
Notes app, german keybard, ABC
 +
 
 +
 
 +
[[File:Ios notes de .?123.PNG | 450px]]
 +
 
 +
Notes app, german keybard, .?123
 +
 
 +
 
 +
[[File:Ios garageband song title.PNG | 450px]]
 +
 
 +
Garageband app, german keyboard, ABC, edit the song title
 +
* Return key adjusted to 'Fertig'
 +
 
 +
 
 +
[[File:Ios email address.PNG  | 450px]]
 +
 
 +
Email app,
 +
* '@' key is available in the ABC layout
 +
* as special characters only '.' and '_' and '-' are available
 +
 
 +
 
 +
[[File:Ios email title.PNG | 450px]]
 +
 
 +
Email app
 +
* is a standard ABC layout
 +
 
  
 
===Safari open url ===
 
===Safari open url ===
 
[[File:Ios safari url.PNG | 450px]]
 
[[File:Ios safari url.PNG | 450px]]
 +
 +
Safari app, english keyboard, ABC, go to address:
 +
* highly customized for url editing
 +
* Return key adjusted to 'Go'
 +
* added '.com' key, no 'space' key
 +
* moved some of the keys from '.?123' here like ':', '/', '_' and '-'
 +
* removed the '!' and '?' key as the secondary option from the ',' and '.' key
 +
 +
===Custom keyboard additions for special text editing cases===
 +
 +
Below is a selection of custom keyboards designed for editing source code of various languages and environments, standard approach is to allow an application specific palette containing the extra functionality to be attached to the top edge of the on screen keyboard.
 +
 +
[[File:IOS source could editor with keyboard.PNG | 450px]]
 +
 +
In this source code editor, note the extra row with commonly used source code characters. The developer here has increased the character density by implementing a custom joystick like behaviour where touching a key and releasing triggers the middle character, but touching and sliding in any of the NE SE SW NW directions triggers a character in a key corner.
 +
 +
 +
[[File:IOS lua source code editor with custom keyboard.PNG | 600px]]
 +
 +
This Lua source environment has a custom keyboard strip that adds more advanced features than just extra characters, several of these keys pop-up palettes with symbols and context sensitive help.
 +
 +
 +
[[File:IOS python source code editor with custom keyboard.PNG | 450px]]
 +
 +
Another example of a python source code editor with a custom keyboard strip.
 +
 +
 +
[[File:IOS Java Processing environment keyboard.PNG | 450px]]
 +
 +
Custom keyboard strip for a Java Processing environment.
 +
 +
 +
[[File:IOS ssh shell terminal emulation custom keyboard.PNG | 450px]]
 +
 +
Extra key strip for this ssh console terminal emulator.
 +
 +
 +
[[File:IOS OKS example with extra custom keys.png | 450px]]
 +
 +
A simple text editor uses an extra keyboard strip for providing easy access to commonly used punctuation (even though they are accessible through extra key presses with the standard keyboard).
 +
 +
 +
[[File:IOS OKS Wolfram example with many extra custom keys.png | 450px]]
 +
 +
Wolfram's app has MANY extra keys ;)
 +
 +
 +
[[File:IOS OKS Numbers example with context sensitive keyboard.png | 450px]]
 +
 +
Numbers uses several context sensitive keyboard for inputting numerical data, date information, formulas, as well a just text.

Latest revision as of 08:12, 4 May 2012

Onscreen keyboard iOS

Search

Safari search in page

Ios safari search ABC.PNG

Safari app, english keyboard, ABC, search in the page

  • Return key is changed to 'Search' and does invoke the search
  • additional navigation for the serach results added above the keyboard


Ios safari search capitalize ABC.PNG

Safari app, english keyboard, ABC, search in the page, capitalize letters

  • to capitalize a letter you need to press the 'Shift' key once
  • the 'Shift' key is highlighted then
  • the capitalization is only applied to the next character and the functionality is then automatically disabled again (key returns normal)
  • the upper case/lower case characters are not reflected in the keyboard itself
  • you can not make the upper case shift functionality permanent


Ios safari search .?123.PNG

Safari app, english keyboard, ?123, search in the page


App store search

Ios appstore search.PNG


Maps search

Ios maps search.PNG

Text

Ios notes eng ABC.PNG

Notes app, english keybard, ABC


Ios notes eng .?123.PNG

Notes app, english keybard, .?123


Ios notes de ABC.PNG

Notes app, german keybard, ABC


Ios notes de .?123.PNG

Notes app, german keybard, .?123


Ios garageband song title.PNG

Garageband app, german keyboard, ABC, edit the song title

  • Return key adjusted to 'Fertig'


Ios email address.PNG

Email app,

  • '@' key is available in the ABC layout
  • as special characters only '.' and '_' and '-' are available


Ios email title.PNG

Email app

  • is a standard ABC layout


Safari open url

Ios safari url.PNG

Safari app, english keyboard, ABC, go to address:

  • highly customized for url editing
  • Return key adjusted to 'Go'
  • added '.com' key, no 'space' key
  • moved some of the keys from '.?123' here like ':', '/', '_' and '-'
  • removed the '!' and '?' key as the secondary option from the ',' and '.' key

Custom keyboard additions for special text editing cases

Below is a selection of custom keyboards designed for editing source code of various languages and environments, standard approach is to allow an application specific palette containing the extra functionality to be attached to the top edge of the on screen keyboard.

IOS source could editor with keyboard.PNG

In this source code editor, note the extra row with commonly used source code characters. The developer here has increased the character density by implementing a custom joystick like behaviour where touching a key and releasing triggers the middle character, but touching and sliding in any of the NE SE SW NW directions triggers a character in a key corner.


IOS lua source code editor with custom keyboard.PNG

This Lua source environment has a custom keyboard strip that adds more advanced features than just extra characters, several of these keys pop-up palettes with symbols and context sensitive help.


IOS python source code editor with custom keyboard.PNG

Another example of a python source code editor with a custom keyboard strip.


IOS Java Processing environment keyboard.PNG

Custom keyboard strip for a Java Processing environment.


IOS ssh shell terminal emulation custom keyboard.PNG

Extra key strip for this ssh console terminal emulator.


IOS OKS example with extra custom keys.png

A simple text editor uses an extra keyboard strip for providing easy access to commonly used punctuation (even though they are accessible through extra key presses with the standard keyboard).


IOS OKS Wolfram example with many extra custom keys.png

Wolfram's app has MANY extra keys ;)


IOS OKS Numbers example with context sensitive keyboard.png

Numbers uses several context sensitive keyboard for inputting numerical data, date information, formulas, as well a just text.

Retrieved from "https://wiki.sugarlabs.org/index.php?title=Design_Team/Proposals/Touchscreen/On-screen_Keyboard/Examples_iOS&oldid=78085"