Spin Button
A spin button is a text field that accepts a range of values, allowing the button to increase or decrease the value by a specified amount.
Written by: Prince Pal Singh
Your UI/UX Designer. Consultant. Partner. Over the past 18 years, I designed websites and apps for enterprise-level clients like Stanford-HCI Research, Accenture, Juniper Networks, Gemalto, Virtual Dental Care & much more.
A
- AB Testing
- Above The Fold
- Acceptance Criteria
- Accessibility
- Accordion
- Adaptive Design
- Adobe XD
- Advanced Prototype
- Affinity Diagram / Affinity Map
- Agile Software Development
- Aliasing / Anti-Aliasing
- Alignment
- ALT Text
- Analogous Colors
- Analytics
- Android App
- Angular
- Animation Design
- Anomalous Trichromats
- Anthropometry
- API
- Artificial Intelligence (AI)
- Ascender
- Assistive Technology
- Audit
- Augmented Reality (AR)
- Auto Complete
- Auto Correct
- Avatar
C
- Cache
- Call-To-Action
- Canonic Perspective
- Card Sorting
- Cascading Menus
- Cascading Style Sheets (CSS)
- Case Study
- Causation
- Charts
- Chatbot
- Checkbox
- Chromostereopsis
- Chunking
- Click Dummy
- Click Stream
- Cognitive Biases
- Cognitive Friction
- Cognitive Load
- Cognitive Processing
- Cognitive Walkthrough
- Color Palette
- Color Theory
- Color Wheel
- Combo Boxes
- Command Line Interface
- Commits
- Competitor Analysis
- Complementary Colors
- Concept Sketch
- Concept Sprint
- Consistency
- Content Design
- Content Management System (CMS)
- Content Strategy
- Context Effect
- Context Sensitive Popup Menu
- Contextual Inquiry
- Contrast
- Conversational Interface
- Conversion Rate
- Cookies
- Corporate Identity
- Correlation
- Counters
- Critique
- CRM (Customer Relationship Management)
- Cross Checking (Cross Validation)
- Customer Experience (CX)
- Customer-Centric
D
- Dark Pattern/Dark UX
- Dashboard
- Data Collection
- Data Science
- Data-Driven Design
- Date/Time Picker
- Decision Matrix
- Demographic
- Descender
- Design Deliverables
- Design Exercise
- Design Facilitation
- Design Patterns
- Design Sprint
- Design System
- Design Thinking
- Design Validation
- Design Verification
- Detailed Design
- Deuteranopia
- Developers
- Dialogue
- Diary Study
- Dichromats
- Direct User Data
- Disabled (Button / Control)
- Django Web Framework
- Docker
- Domain Expertise
- Döner Menu Icon
- Dot Voting
- Dribbble
- Drop-Down List Box
- Dropdown Buttons
- Dropdown/Dropdown Lists
E
- E2E Tests
- Early Adopters
- Early Prototype Testing
- Edge Case
- Efficiency
- Empathy
- Empathy Map
- End User
- Engagement
- Environmental Profile
- Ergonomics
- Error Analysis
- Error Detection
- Error Handling
- Error of Commission / Error of Omission
- Error Rate
- Ethical Design
- Ethnographic Study
- Ethnography
- Executive Champion
- Expectancy Test
- Experience Architecture
- Experience Design
- Explicit Save
- Eye Ball Tracking
I
- Iconography
- Ideation
- Image Map
- Inclusive Design
- Index Page
- Indirect User Data
- Industrial Design
- Infographics
- Information Architecture (IA)
- Informational Components
- Input Control
- Interaction Design (IxD)
- Interaction Designer
- Intuitive Design
- Inverted Pyramid Writing
- Invision Studio
- Ionic
- iOS App
- IP Address
- Irregular Shapes
- Iteration
- Iterative Design
- Iterative Testing
L
- Labels on website
- Landing Page
- Late Adopters
- Law of Common Region
- Law of Prägnanz
- Law of Proximity
- Law of Similarity
- Law of Uniform Connectedness
- Layout Graphic
- Leading
- Lean UX
- Learnability
- Legibility in design
- Likert Scale
- Line-height
- Line Length
- Linux
- Liquid Layout
- List Box
- Live Site Analysis
- Lo-Fi Prototypes
- Load Time
- Loader or Loading Bar
- Localization
- Logo
- Long Tail Keywords
- Look & Feel
- Luminance
P
- Padding
- Page Flow
- Page Types
- Pagination
- Pain-Points
- Pairing Designing
- Paper Prototype
- Paradox of Choice
- Paradox of Specificity
- Parkinson’s Law
- Pattern Recognition
- Peak-End Rule
- Persona
- Phi Phenomenon
- Pixel Density
- Pluralistic Walkthrough
- Practicality Test
- Preference Data
- Presentation Design
- Product Designer
- Product Management
- Product Roadmap
- Production Environment
- Progress Bar
- Progressive Disclosure
- Progressive Web Application (PWA)
- Prototype
- Proximity Principle
- Proxy PO
- Psychodynamics
- Psychographics
- Pull Request
- Python
R
- Radio Button
- Rapid Prototyping
- Rating Scales
- ReactNative
- Readability
- Reading Grade Level (RGL)
- Recall and Recognition
- Remote Usability Test
- Representative Sampling
- Requirements-gathering
- Research and Planning
- Resolution
- Responsive Web Design
- REST API
- Retention
- Retro
- Return On Investment (ROI)
- Reverse Card Sort
- Review
S
- SaaS
- Saccades
- Sans Serif
- Satisficing
- Saturated Color
- Scannability
- Scenario
- Schema (Pl. Schemata)
- Screen Readers
- Scrum Master and Scrum Artifacts
- SDK (Software Development Kit )
- Search Field
- Segments
- SEO
- Serial Position Effect
- Serif
- Service Design
- Sidebar
- Sitemap
- Sketch
- Slack
- Slider
- Small Field Tritanopia
- Software
- Source Code
- Spin Button
- Sprints
- Stakeholder Interviews
- Standards Design
- Statement of Work (SOW)
- Static Layout
- Storyboard
- Styleguide
- Summative Testing
- Survey
- SVG
- Switch or Toggle
- Symphony
U
- UI Design
- UI Element
- UI Kit
- Un-Moderated Usability Testing
- Unique Selling Proposition (USP)
- Unit Testing
- Usability Testing
- Use Case
- User Experience (UX)
- User Flow
- User Groups
- User Interface (UI)
- User Interview
- User Journey Map
- User Onboarding
- User Profile
- User Research
- User Satisfaction
- User Scenario
- User Stories
- User Testing
- User-Centered Design (UCD)
- UX Audit
- UX Documentation
- UX Portfolio
- UX Researcher
- UX Writing
- UX/UI Developer
What is Spin Button?
Overview
A spin button is a text field that accepts a range of values, allowing the button to increase or decrease the value by a specified amount. One should use the spin button only when the exact numeric value is meaningful, otherwise; sliders might be a better option.
A spin button allows the user to select a value from a fixed set of mutually exclusive values. The values are displayed as if they were arranged in a ring. By default, it appears that the up and down spin buttons are side by side in the numeric editor.
The spin button makes it easy to increase or decrease a value, such as a number increment, time, or date. To increase the value, click the up arrow; To decrease the value, click the Down Arrow. A user can also directly type the text value in the corresponding cell or text box.
LET’S WORK TOGETHER
Boost your design scope with Think 360
Book a call with us and get the party started!
Book A Demo
